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">
    <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表示安装最新版本）