vue2.0使用vue-pdf(简单版本)

1.引入vue-pdf(vue-pdf版本:4.3.0,vue版本:2.6.14)

复制代码
npm install --save vue-pdf

2.引入本地文件(放public文件夹下用于测试。后期用接口返回的地址)

111.pdf:自己随意生成的一个

3.页面按需引入

复制代码
<script>
import Pdf from "vue-pdf"
export default {
  components: { Pdf }
}
</script>

4.完整代码

pdfShow.vue

复制代码
<template>
  <div>
    <div class="tools">
      <el-button type="primary" @click.stop="prePage">上一页</el-button>
      <el-button type="primary" @click.stop="nextPage">下一页</el-button>
      <el-button type="primary">{{ currentPage }}/{{ pageCount }}</el-button>
      <el-button type="primary" @click.stop="scaleD">放大</el-button>
      <el-button type="primary" @click.stop="scaleX">缩小</el-button>
     
    </div>
    <div class="pdf">
       <!-- page当前显示的页数 progress当前页面加载进度,范围0-1,等于1时代表当前页完全加载完成,page-loaded页面加载成功的回调函数 num-pages总页数 -->
    <pdf 
           ref="pdf"
           :src="url"
           :page="currentPage"
           @num-pages="pageCount=$event"
           @page-loaded="currentPage = $event"
           @loaded="loadPdfHandler"
           @progress="loadedRatio = $event">
         </pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'HelloWorld',
  components:{
        pdf,
  },
  props: {
    msg: String
  },
  data(){
    return {
      // url:"http://221.2.195.94:8072/group1/M00/00/15/DAoMrmT3RvqAc0ifAKewIsM7DXk324.pdf",
      url:"111.pdf",
      currentPage:0,//pdf页码
      pageCount:0,//pdf文件总页数
      scale:100,//开始的时候默认和容器一样大,即宽高都是1000%
      navPage:1,//跳转的页数
    }
  },
  mounted(){
  },
  methods:{
    //上一页函数
    prePage(){
      if (this.currentPage > 1) {
        this.currentPage--;
      }else{
        this.$message.warning("已经是第一页")
      }
    },
    //下一页函数
    nextPage(){
      if (this.currentPage <this.pageCount) {
        this.currentPage++;
      }else{
        this.$message.warning("已经是最后一页")
      }
    },
    //pdf加载
    loadPdfHandler(){
      this.currentPage = 1; // 加载的时候先加载第一页
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },
    //放大
    scaleD(){
      if(this.scale == 100){
        return this.$message.warning("已经是最大咯")
      }
      this.scale +=10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX(){
      if(this.scale == 40){
        return this.$message.warning("已经是最小咯")
      }
      this.scale +=-10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },

  }
}
</script>
<style scoped>
</style>

App.vue

复制代码
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <pdfShow style="width: 400px;height: 500px;border: 1px solid #ccc;overflow-y: scroll;" />
  </div>
</template>

<script>
import pdfShow from './components/pdfShow.vue'

export default {
  name: 'App',
  components: {
    pdfShow
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

复制代码
import Vue from 'vue'
import App from './App.vue'

// 引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
  }).$mount('#app')
相关推荐
你的人类朋友1 小时前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰2 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化2 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染