移动端H5+vue使用vue-pdf在线预览PDF

 

需求是点击查看收据按钮，进入新页面直接显示收据，可以放大、缩小、旋转、下载，没有分页

1、安装

npm i vue-pdf --save

2、使用

<template>
  <div >
    <pdf v-if="show" :rotate="pageRotate" ref="pdf" :src="pdfSrc" />
    <div v-if="show" class="btn_contain">
      <div class="com_btn" @click="scaleD">放大</div>
      <div class="com_btn" @click="scaleX">缩小</div>
      <div class="com_btn" @click.stop="clock">旋转</div>
      <div class="com_btn" @click="downloadPDF">下载</div>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
import { Toast } from 'vant'
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: '',
      pxheight: '',
      pxwidth: '',
      scale: 100, // 放大系数
      pageRotate: 0,//旋转系数
      url: ``,//此处为后台返回的预览pdf的url接口路径，带参数，不便展示，所以删除，自己加上就好
      loadingInstance: null,
      show: false
    }
  },
  created(){
  },
  mounted() {
    this.loadPdf(this.url)
    
  },
  methods: {
    // pdf加载时
    loadPdf(url) {

      // 展示loading
      this.loadingInstance = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";
      this.pdfSrc = pdf.createLoadingTask({
        url,
        cMapUrl: CMAP_URL,
        cMapPacked: true,
        CMapReaderFactory
      });

      this.pdfSrc.promise.then((pdf) => {

        // 清除loading
        this.loadingInstance && this.loadingInstance.clear();
        this.show = true

      }).catch(()=>{})
    },

    // 放大
    scaleD(){
      this.scale += 5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },

    // 缩小
    scaleX () {
      if (this.scale === 100) {
        return
      } this.scale += -5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },

    // 旋转
    clock () {
      this.pageRotate += 90
    },
    
    //下载PDF
    downloadPDF(){
      window.location.href = ''//此处为后台返回的下载pdf的url接口路径，带参数，不便展示，所以删除，自己加上就好
  },
}
</script>

使用vue-pdf遇到的坑，总的来说有三个

1、进入页面后不显示文字

查阅解决方法，看到了两种，

一种是导入cMapReaderFactory,但是用第一种方法会导致问题2 （看了一个大佬写的）

一种是代码中加CMAP_URL和cMapPacked两个参数（这种的不知道管不管用）

巧的是这两种我都不管用，哈哈哈哈哈

2、进入页面后显示，但是再次进入页面不显示问题

引入了cMapPacked之后解决了上面的问题，但是紧接着出现了再次进入页面不显示的问题。

在CMapReaderFactory文件中的代码是这样的 

import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'

// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64

export default function() {

	this.fetch = function(query) {

		return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
		.then(function(bcmap) {
      

			return {
				cMapData: bcmap.default,
				compressionType: CMapCompressionType.BINARY,
			};
		});
	}
};

这段代码通过动态import PDF的语言文件实现解决中文显示的问题

3、pdf签章没显示出来，控制台提示：Warning: Unimplemented widget field type "Sig", falling back to base field type

（1）找到 node_modules\pdfjs-dist\build\pdf.worker.js 将下面的代码行注释掉

if (data.fieldType === "Sig") {
      data.fieldValue = null;
      // this.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉解决签章不显示问题
    }

 2、找到 node_modules\pdfjs-dist\es5\pdf.worker.js 将下面的代码行注释掉

if (data.fieldType === "Sig") {
      data.fieldValue = null;

   // _this3.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉
}