大悟网站开发_自建网络商城_网络营销的主要传播渠道是_嘉兴新站seo外包

使用vue-pdf预览pdf和解决pdf电子签章显示问题

第一步：npm install vue-pdf

第二步页面使用vue-pdf

<template><div class="pdf1"><Pdf v-for="i in numPages" :key="i" :src="src" :page="i" /></div>
</template><script>
import Pdf from "vue-pdf";export default {components: {Pdf},data() {return {numPages: undefined,src: "",fileUrl: `${window.location.origin}/test1.pdf`};},mounted() {},created() {this.getPdfs();},mounted() {},methods: {// 获取pdfgetPdfs() {// 引入pdf.js的字体let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";// let CMAP_URL = `${window.location.origin}/cmaps/`;this.src = Pdf.createLoadingTask({// url: 'http://h1.pdfdo.com/Download/112617223362/112617223362.html', //在线链接pdfurl: this.fileUrl, //本地pdfcMapUrl: CMAP_URL,cMapPacked: true});this.src.promise.then(pdf => {this.numPages = pdf.numPages;});}}
};

第三步pdf预览电子签章显示问题-解决办法

步骤一： 在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);}