js取iframe 上级页面_pdf.js实战，含水印、电子签章解决方案

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

一、pdf-vue

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

github地址

https://github.com/FranckFreiburger/vue-pd f#readme

1、npm install pdf-vue --save

2、template代码

class="pdf" v-show="fileType === 'pdf'">

class

="arrow"> // 上一页 "changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview { {currentPage}} / { {pageCount}} // 下一页 "changePdfPage(1)" class="turn" :class="{grey: 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页码,v