【vue && vue-pdf】pdf展示及解决签章不显示的问题

 1.下载 

npm i vue-pdf
//我使用的是4.2.0版本,版本可能影响问题的解决
npm i vue-pdf@4.2.0

 

  2.作为组件引入

import pdf from 'vue-pdf';


export default {
    components:{
        pdf
    }
}

 

3.使用

 定义pages变量稍后用来获取pdf的页数

<pdf v-for="i in pages" :key="i"  :src="pdfUrl" :page="i"/>

获取pdf页数 

export default {
    data(){
        return {
            pages:0
        }
    },
    methods:{
        // 获取pdf页码
        getPages(url){
            let loadingTask = pdf.createLoadingTask(url);
            loadingTask.promise.then(pdf => {
                this.url = loadingTask;
                this.pages = pdf.numPages;
            }).catch((err) => {
                this.$message.error('pdf加载失败');
                console.error('pdf加载失败',err);
            })
        }
    }
}

 

4.解决签章不显示的问题

该问题的解决参考如下文章：https://blog.csdn.net/gby23300/article/details/108833167 

 到node_modules\pdfjs-dist\es5\build\pdf.worker.js该文件里改写如下代码：

if (data.fieldType === "Sig") {
      data.fieldValue = null;
      //pdf显示红印章--注释掉
      //_this3.setFlags(_util.AnnotationFlag.HIDDEN);
}