vue电子签章（细品pdf.js实践解决含水印）
vue电子签章（细品pdf.js实践解决含水印）Warning: Unimplemented widget field type "Sig" falling back to base field type. 复制代码从网上搜了很多方法，说是需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：<template> <div class="cpdf" id="cpdf"> <div class="center"> <canvas class="canvasstyle" id="the-canvas"></canvas> <div class="contor"> <
作者：jerryWu
转发连接：https://juejin.im/post/5ec48f84e51d45788266753a
PDF.js实战，含水印、电子签章解决方案项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。
一、vue-pdf直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。
github地址： https://github.com/FranckFreiburger/vue-pdf
1、npm install pdf-vue --save2、template代码<template>
<div class="pdf" v-show="fileType === 'pdf'">
<p class="arrow">
// 上一页
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
{{currentPage}} / {{pageCount}}
// 下一页
<span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
</p>
// 自己引入就可以使用 这里我的需求是做了分页功能 如果不需要分页功能 只要src就可以了
<pdf
:src="src" // src需要展示的PDF地址
:page="currentPage" // 当前展示的PDF页码
@num-pages="pageCount=$event" // PDF文件总页码
@page-loaded="currentPage=$event" // 一开始加载的页面
@loaded="loadPdfHandler"> // 加载事件
</pdf>
</div>
</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-distpdf-dist也是基于pdf.js的一个组件，只不过没有封装，需要自己配置，优点是可配置，可实现特殊的需求，缺点是需要自己封装，水印可加载，网上说可以加载电子签章，我的加载不出来，所以还是没采用。
1、npm install pdf-dist --save2、封装一个pdf.vue<template>
<div class="cpdf" id="cpdf">
<div class="center">
<canvas class="canvasstyle" id="the-canvas"></canvas>
<div class="contor">
<button @click="prev" style="margin-right: 10px">上一页</button>
<span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
<button @click="next" style="margin-left: 10px">下一页</button>
</div>
</div>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'
export default {
name: 'c-pdf'
// 接收父组件传来的参数
props: ['pdfurl']
components: { }
data () {
return {
pdfDoc: null // pdfjs 生成的对象
pageNum: 1 //
pageRendering: false
pageNumPending: null
scale: 1 // 放大倍数
page_num: 0 // 当前页数
page_count: 0 // 总页数
maxscale: 2 // 最大放大倍数
minscale: 0.8// 最小放大倍数
}
}
methods: {
renderPage (num) { // 渲染pdf
let vm = this
this.pageRendering = true
let canvas = document.getElementById('the-canvas')
let ctx = canvas.getContext('2d')
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
let dpr = window.devicePixelRatio || 1
let ratio = dpr / bsr
// Using promise to fetch the page
this.pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
// alert(vm.canvas.height)
canvas.height = ratio * viewport.width
canvas.width = ratio * viewport.height
canvas.style.width = 1.5 * viewport.width 'px'
canvas.style.height = 1 * viewport.height 'px'
ctx.setTransform(ratio 0 0 ratio 0 0)
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx
viewport: viewport
}
var renderTask = page.render(renderContext)
// Wait for rendering to finish
renderTask.promise.then(function () {
vm.pageRendering = false
if (vm.pageNumPending !== null) {
// New page rendering is pending
vm.renderPage(vm.pageNumPending)
vm.pageNumPending = null
}
})
})
vm.page_num = vm.pageNum
}
addscale () { // 放大
if (this.scale >= this.maxscale) {
return
}
this.scale = 0.1
this.queueRenderPage(this.pageNum)
}
minus () { // 缩小
if (this.scale <= this.minscale) {
return
}
this.scale -= 0.1
this.queueRenderPage(this.pageNum)
}
prev () { // 上一页
let vm = this
if (vm.pageNum <= 1) {
return
}
vm.pageNum--
vm.queueRenderPage(vm.pageNum)
}
next () { // 下一页
let vm = this
if (vm.pageNum >= vm.page_count) {
return
}
vm.pageNum
vm.queueRenderPage(vm.pageNum)
}
closepdf () { // 关闭PDF
this.$emit('closepdf')
}
queueRenderPage (num) {
if (this.pageRendering) {
this.pageNumPending = num
} else {
this.renderPage(num)
}
}
}
computed: {
ctx () {
let id = document.getElementById('the-canvas')
return id.getContext('2d')
}
}
mounted () {
let vm = this
PDFJS.getDocument(vm.pdfurl).then(function (pdfDoc_) { // 初始化pdf
vm.pdfDoc = pdfDoc_
vm.page_count = vm.pdfDoc.numPages
vm.renderPage(vm.pageNum)
})
}
}
</script>
<style lang="stylus" scoped>
.cpdf {
display: flex;
justify-content: center;
align-items: center;
.center {
text-align: center;
height: 100%;
overflow: hidden;
padding-top: 20px;
.contor {
position: fixed;
bottom: 30px;
left: 0;
width: 100%;
z-index: 99999;
font-size 30px
margin-top 20px
margin-bottom: 10px;
}
}
}
</style>
复制代码3、直接当成组件，引用就可以了
import cdpdf from '../../../components/pdf.vue'
<cdpdf :pdfurl="pdfurl"></cdpdf>
复制代码
一开始项目使用的是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://github.com/mozilla/pdf.js
下载下来以后放在public文件下（3.x脚手架）
2、iframe标签直接粗暴的设置src<iframe :src="pdfUrl" :style="{height: Height}" style="width: 100%"></iframe>
this.pdfUrl = '../pdf/web/viewer.html?file=' this.pdfurl 'PDF'
pdfUrl是iframe标签的URL，pdfurl是需要查看的PDF文件的url
复制代码总结
只要能实现需求的代码就是好代码，我的项目是移动端查看PDF文件，因为文件上有电子签章，所以尝试了好几种方案，个人还是推荐第二种方案，如果没有电子签章的情况下。
推荐Vue学习资料文章：《基于vue element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目（vue koa mongodb）》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布，彻底弄明白和 node 的区别》
《「实践」基于Apify node react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》
《教你部署搭建一个Vue-cli4 Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》
《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统（Node Vue）（上）》
《实现全栈收银系统（Node Vue）（下）》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级（九宫格拖拽）》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文 多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：jerryWu
转发连接：https://juejin.im/post/5ec48f84e51d45788266753a
