vue2.0 H5页面实现上上签pdf预览及签名显示(后台接口返回base64格式)

本文主要是介绍vue2.0 H5页面实现上上签pdf预览及签名显示(后台接口返回base64格式)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一.起步（如果时间着急请忽略一二，直接从第三步最终解决方案看起）

通过网上搜索资料，决定使用vue插件vue-pdf实现pdf文件预览，vue-pdf封装了原生pdf.js和pdfjs-dist

1.安装插件：

npm install vue-pdf@4.1.0（必须使用此版本）

2.实现代码如下：

<template><div class="content"><pdfv-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"><pdfv-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中隐藏签名的代码，如下图