pdf.js实战，含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。

一、pdf-vue

直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。

github地址： https://github.com/FranckFrei...

1、npm install pdf-vue --save

2、template代码

3、js代码

import pdf from 'vue-pdf'
export default {
    components: {pdf},
    data () {
      return {
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
    　　　　src: '', // pdf文件地址
      }
    },
　　created: {
　　　　// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
　　　　this.src = pdf.createLoadingTask(this.src)
　　}
    method: {
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
    
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
    
    }
}

使用非常方便，尤其是只需要翻页，或者不需要翻页的，强烈推荐。

二、pdf-dist

pdf-dist也是基于pdf.js的一个组件，只不过没有封装，需要自己配置，优点是可配置，可实现特殊的需求，缺点是需要自己封装，水印可加载，网上说可以加载电子签章，我的加载不出来，所以还是没采用。

1、npm install pdf-dist --save

2、封装一个pdf.vue

3、直接当成组件，引用就可以了

import cdpdf from '../../../components/pdf.vue'

一开始项目使用的是pdf-dist，因为后来电子签章显示不出来：

Warning: Unimplemented widget field type "Sig", falling back to base field type.

从网上搜了很多方法，说是需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：

if(data.fieldType==='Sig') {
    warn('unimplemented annotation type: Widget signature');
    // 注释下面这行代码
    this.setFlags(AnnotationFlag.HIDDEN);
 }
 

可能是移动端使用微信浏览器的原因，注释掉代码还是不好使，只能再想其他办法了

三、pdf.js

最后用了最笨的办法，直接从GitHub拉下来pdf.js的demo，用iframe标签包住demo里的HTML文件，直接套着用，完美解决电子签章的问题：

1、从GitHub拉一下源码，或者从这个地址直接下载

https://mozilla.github.io/pdf...

下载下来以后放在public文件下（3.x脚手架）

2、iframe标签直接粗暴的设置src

this.pdfUrl = '../pdf/web/viewer.html?file=' + this.pdfurl, +'PDF'

pdfUrl是iframe标签的URL，pdfurl是需要查看的PDF文件的url

总结

只要能实现需求的代码就是好代码，我的项目是移动端查看PDF文件，因为文件上有电子签章，所以尝试了好几种方案，个人还是推荐第二种方案，如果没有电子签章的情况下。

公众号定时更新实战和基础博客，欢迎各位哥哥姐姐关注！