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')