第一步：引入pdf包
import pdf from "vue-pdf-signature";，这里不引入vue-pdf的包后面再做解释 import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js"; （CMapReaderFactory）解决汉字空白的问题
第二步：页面的component注册pdf组件
components: {
pdf
},
第三步：页面放置pdf盒子
<!-- 有查询pdf结果显示的盒子 --> <pdf :src="pdfSrc"></pdf> // pdfSrc为pdf包处理过后的预览链接
第四步：页面请求加载pdf之前可以写一个loading的方法，这里用的vant提示，无需要可不写
slowLoading() {
var _this = this
const toast = Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: "正在生成您的权益单，请稍等...",
className: "loading"
});
let tips = [
'正在生成您的权益单，请稍等...',
'权益单文档生成时间较长，请耐心等待',
'您可以选择年度查询']
let strlen = tips.length;
_this.tipTimer = setInterval(() => {
let index = Math.floor(Math.random() * strlen);
toast.message = tips[index];
}, 3000);
}
第五步：引入处理pdf下载的方法
// _this.pdfUrl是后端返回的pdf链接
// _this.pdfSrc声明空变量对处理的过的pdf链接进行接收绑定给页面的pdf组件的src属性
loadPdf() {
var _this = this;
_this.pdfDownloadUrl = _this.pdfUrl + "?isDownload=1";
console.log(_this.pdfDownloadUrl);
_this.pdfSrc = pdf.createLoadingTask({
url: _this.pdfUrl,
// 没有生效，需要确认原因并修改
onProgress: function (status) {
let ratio = status.loaded / status.total;
console.log("加载进度.." + ratio);
},
//cMapUrl: `https://cdn.jsdelivr.net/npm/pdfjs-dist@^2.5.207/cmaps/`,
cMapPacked: true,
CMapReaderFactory
});
//加载完PDF后对缓存进行清除
for (var key in require.cache) {
if (key.indexOf('bcmap') >= 0) {
delete require.cache[key];
}
}
// _this.pdfSrc = _this.loadingTask;
// console.log(_this.pdfSrc, 'src');
_this.pdfSrc.promise.then(pdf => {
console.log(pdf)
console.log("pdf 加载成功...");
Toast.clear();
clearInterval(_this.tipTimer);
},
err => {
console.log("rejected: ", err);
clearInterval(_this.tipTimer);
Toast.clear();
Toast.fail({
message: '权益单生成失败，请重试',
forbidClick: true,
duration: 2,
});
});
},
reloadPdf() {
this.slowLoading();
this.loadPdf()
},
this.reloadPdf()
vue-pdf的插件在使用的过程中是连连踩坑的，基本遇到3个问题：
1、PDF中文不显示
2、PDF签章没显示出来
3、第二次打开PDF的时候会遇到PDF空白的问题
问题1，通过引入CMapReaderFactory.js解决问题，但是这会引起问题3的出现
问题2，pdf签章不显示出来
//pdf.worker.js
if (data.fieldType === 'Sig') {
data.fieldValue = null;
//注释此行代码即可
//_this3.setFlags(_util.AnnotationFlag.HIDDEN);
}
问题3，页面空白
CMapReaderFactory文件中加一行delete代码，加载完语言文件后清除缓存就好了
import { CMapCompressionType } from 'pdfjs-dist-sign/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) {
/* webpackChunkName: "noprefetch-[request]" */
return import('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap').then(function(bcmap) {
//加载完语言文件后清除缓存
delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];
return {
cMapData: bcmap.default,
compressionType: CMapCompressionType.BINARY,
};
});
}
};
vue-pdf的包是需要上面这么处理的，但是我在网上get到这么一个包，是其他人在vue-pdf包的基础上做的改善，所以不想麻烦的宝贝可以直接下载我最开始说的那个包就OK了(vue-pdf-signature)
