vue-pdf 在线预览pdf（pdf地址或base64pdf）解决电子签章显示问题

使用vue-pdf在线预览pdf
并使得带有电子签章的pdf能够正常预览出来

1.安装vue-pdf

`

npm install vue-pdf
npm install pdfjs-dist

//或者
yarn add vue-pdf
`

2.新建pdf组件

新建AppPdf.vue文件

// AppPdf.vue
<template>
    <div>
        <pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'
    export default {
		components:{
			pdf
		},
		props:{
            pdfSrc: String
        },
		data(){
			return {
				numPages: null,
				src: ""
			}
		},
		mounted() {
            this.getNumPages() // base64pdf 文件的预览
            this.getNumPages2() // pdf 文件地址的预览
        },
        methods:{
            // #计算pdf页码总数
            getNumPages() {
            	let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'（往下面看【注意】）
                let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc 
                this.src = pdf.createLoadingTask({
                    url: perfix64,
                    withCredentials: false,
                    cMapUrl: CMAP_URL,
                    cMapPacked: true
                    });
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                    console.log(this.numPages)
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })
            },
            
            getNumPages2(){
                this.src = pdf.createLoadingTask({
                    url: this.pdfSrc,
                    withCredentials: false
                    });
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                    console.log(this.numPages)
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })
            }
        }
	}
</script>

3.在父组件的使用

// home.vue
//注：signInfos为从后台获取的pdf文件的json对象
<templete>
	<el-tabs v-model="activeName" @tab-click="handleTabClick">
         <el-tab-pane label="合同1" name="合同1">
             <AppPdf :pdfSrc="signInfos.pdf1"></AppPdf>
         </el-tab-pane>
         <el-tab-pane label="合同2" name="合同2">
             <AppPdf :pdfSrc="signInfos.pdf2"></AppPdf>
         </el-tab-pane>
     </el-tabs>
</templete>

4.解决电子签章无法显示的问题

步骤一

• 在node_modules/pdfjs-dist/build/pdf.worker.js注释掉一行代码

if (data.fieldType === "Sig") {
      data.fieldValue = null;
      // 注释掉底下这行 就可以显示电子签章
      // this.setFlags(_util.AnnotationFlag.HIDDEN);
}

步骤二

• 在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释掉一行代码

 if (data.fieldType === "Sig") {
    data.fieldValue = null;
      // 注释掉底下这行 就可以显示电子签章
      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
 }

最后就可以在页面中看到你想看到的pdf咯

5.注意：

在控制台会出现如下警告⚠️：

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

当PDF文件中有中文的情况下，在引用pdfjs过程中可能会出现中文不显示问题，在console中会提示如上错误。

主要原因是有pdf不支持的字体格式，可以通过引入pdf.js的字体来解决该问题

解决方法：

let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'（往下面看【注意】）
let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc 
this.src = pdf.createLoadingTask({
    url: perfix64,
    withCredentials: false,
    cMapUrl: CMAP_URL,
    cMapPacked: true
    });