pdfjs 参数_pdf.js实战，含水印、电子签章解决方案

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

一、pdf-vue

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

1、npm install pdf-vue --save

2、template代码

// 上一页

Preview

{ {currentPage}} / { {pageCount}}

// 下一页

Next

// 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了

:src="src" // src需要展示的PDF地址

:page="currentPage" // 当前展示的PDF页码

@num-pages="pageCount=$event" // PDF文件总页码

@page-loaded="currentPage=$event" // 一开始加载的页面

@loaded="loadPdfHandler"> // 加载事件

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) {

t