vue-pdf 预览pdf文件

效果:

安装组件vue-pdf

附上vue-pdf的官方地址：https://www.npmjs.com/package/vue-pdf

yarn:
yarn install vue-pdf

npm:
npm install --save vue-pdf

1、pdf.vue  代码，只有一页的

<pdf  :src="pdfSrc" >pdf>

js:

import pdf from 'vue-pdf'
export default {
        components: {pdf},
        data () {
            return {
                src:'/static/1.pdf',// pdf文件地址
            }
        },
        created() {
            // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            this.src= pdf.createLoadingTask({url:this.src})
        },
        method: {
          
        }
    }

注意：文件要放在public文件夹下，不然会报错：

Warning: Ignoring invalid character "33" in hex string'

原因：读取 PDF 文件时，路径不合法，导致读取不到文件； 在 vue-cli3 脚手架搭建的项目中，读取本地的 PDF 文件需要放到 public 文件夹中，在引用时，不能使用相对路径，且‘/’即表示 public 文件夹 (需略去 public)；

 2、pdf.vue  代码，多页，放在一个页面滚动查看，类似浏览器查看pdf文件

  <template>
    <div class="pdf" v-show="fileType === 'pdf'">
      <pdf
        :src="src"
        v-for="i in pageCount"
        :key="i"
        :page="i"
      >
      pdf>
    div>
  template>


<script>
    import pdf from 'vue-pdf'
    export default {
        components: {pdf},
        data () {
            return {
                currentPage: 1, // pdf文件页码
                pageCount: 4, // pdf文件总页数
                fileType: 'pdf', // 文件类型
                src:'/static/1.pdf',// pdf文件地址
            }
        },
        created() {
            // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            this.src= pdf.createLoadingTask({url:this.src})
        },
        method: {
        }
    }

script>

 3、添加分页器（附带旋转、放大、缩小的方法）

这种方式更灵活，但是如果项目自身配置禁止缩放功能的话，还需要手动导入vue-meta-info

yarn add vue-meta-info

main.js:

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

pdf.vue

   

      上一页
      
{{pageNum}}/{{pageTotalNum}} 
      下一页
      
   
   <pdf
        :src="pdfSrc" 
        :page="pageNum"
        class="pdf"
        ref="wrapper"
        :rotate="pageRotate"  
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)" 
        @num-pages="pageTotalNum=$event" 
        @error="pdfError($event)" 
        @link-clicked="page = $event">
    


import pdf from 'vue-pdf'
import { Button } from 'vant';
export default {
    metaInfo: {   //  这里是给页面修改
          title: '',
          meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
          ]
      },
    components: {
       pdf,
    },
    data() {
      return {
        pdfSrc: '',
        numPages: 1  //  pdf 文件总页数
      }
    },
    mounted() {
       this.getNumPages("https://xxxxx.com/pdf/xxx.pdf")
    },
   methods: {
     getNumPages(url) {
      var loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then((pdf) => {
          this.pdfSrc = loadingTask;
          this.pageTotalNum = pdf.pageTotalNum;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
     },
    // 上一页函数，
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
    scaleBig() {
      this.scale += 10;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },
    scaleSmall() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -10;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
    },
   }
}

参考文章：https://www.jianshu.com/p/f00e7266bbb1