预览PDF无法显示签章文件的解决办法
通过网上搜索资料,决定使用vue插件vue-pdf实现pdf文件预览,vue-pdf封装了原生pdf.js和pdfjs-dist。安卓和ios本地打包的情况下都可以正常显示,但是代码提交后在线上环境打包会将注释的代码自动还原,导致生产环境无法正常展示签名。步骤二 在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 注释掉一行代码。3.注释掉vue-p
一.起步
通过网上搜索资料,决定使用vue插件vue-pdf实现pdf文件预览,vue-pdf封装了原生pdf.js和pdfjs-dist
1.安装插件:
npm install vue-pdf@4.1.0
(必须使用此版本)
2.实现代码如下:
<template>
<div class="content">
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
ref="myPdfComponent"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf';
import Api from "../../api/api";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
export default {
components: { pdf },
data() {
return {
src: "",
tdCode: "",
numPages: 0,
page: 1,
currentPage: 0
};
},
computed: {},
methods: {
pdfs() {
Api.getBargainInfo({ tdCode: this.tdCode }).then(res => {
if (res.data) {
let da = res.data;
let datas = "data:application/pdf;base64," + da;
this.src = pdf.createLoadingTask({url:datas,CMapReaderFactory()});
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
} else {
this.$toast(res.data.errorMsg);
}
});
}
},
created() {
this.$emit("changeTitle", {
title: "签署协议预览",
right: true
});
this.tdCode = this.$route.params.tdCode;
this.pdfs();
}
};
</script>
<style scoped></style>
3.效果:
安卓和ios都可以预览pdf文件,通过引入CMapReaderFactory可以解决中文异常显示问题,但是发现上上签的签名无法正常展示
二.解决签名无法正常展示问题
1.踩坑
通过在网上查找资料,发现通过注释vue依赖包node_modules中vue-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);
}
2.效果及问题
安卓和ios本地打包的情况下都可以正常显示,但是代码提交后在线上环境打包会将注释的代码自动还原,导致生产环境无法正常展示签名
三.最终解决方案
实现思路:通过将vue-pdf依赖包中的文件拉到本地,在本地引用解决
1.将文件引入项目根路径,链接如下
http://链接:https://pan.baidu.com/s/1-kowrOBS0ZFuYbVqvh5PZA 提取码:1805
效果图如下:
2.在需要展示的页面引入本地vue-pdf ,直接上代码
<template>
<div class="content">
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
ref="myPdfComponent"
></pdf>
</div>
</template>
<script>
import pdf from '../../lib/vue-pdf';
import Api from "../../api/api";
export default {
components: { pdf },
data() {
return {
src: "",
tdCode: "",
numPages: 0,
page: 1,
currentPage: 0
};
},
computed: {},
methods: {
pdfs() {
Api.getBargainInfo({ tdCode: this.tdCode }).then(res => {
if (res.data) {
let da = res.data;
let datas = "data:application/pdf;base64," + da;
this.src = pdf.createLoadingTask(datas);
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
} else {
this.$toast(res.data.errorMsg);
}
});
}
},
created() {
this.$emit("changeTitle", {
title: "签署协议预览",
right: true
});
this.tdCode = this.$route.params.tdCode;
this.pdfs();
}
};
</script>
<style scoped></style>
3.注释掉vue-pdf/src/pdfjsWrapper.js中隐藏签名的代码,如下图
完美解决,打包后也不会出现问题
四.有问题看这里
1.在最终全部引用完成代码也没问题的情况下报worker-loader的错,仔细查找后发现是版本的问题,需要使用2.0.0版本的worker-loader,引入方法如下:
npm install worker-loader@2.0.0
2.使用过程中如有其他引用错误导致项目启动不了请引入最新版vue-pdf,使用插件的默认引入配置。引入方法如下:
npm install vue-pdf@latest
(latest表示安装最新版本)
————————————————
版权声明:本文为CSDN博主「不是爱情的枪」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_45442879/article/details/123128157
更多推荐
所有评论(0)