1、所用依赖
html2canvas、 jspdf、pdfh5、vue-esign
在该项目中的作用
pdfh5 实现pdf文件的在线预览
jspdf 将盖过章或签过名的的文件以pdf的形式下载下来
html2canvas 主要是将盖过章或签过名文件每一页绘制出来
vue-esign 白板画布，可在上面签名
2、实现效果
签名
下载后的效果：
盖章
上传pdf，上传盖章，盖章（可拖拽）
下载后的效果：
3、核心代码
3.1 签名与盖章效果实现
签名效果实现主要用的是vue-esign插件
引入插件
1、安装插件：
npm install vue-esign
2、在组件中，引入vue-esign 插件。
import VueEsign from 'vue-esign';
3、在组件中使用插件：在需要展示签字功能的组件中，使用 <vueEsign></vueEsign> 标签进行调用。
<template>
<div>
<!-- <div @click="closeSign()" style="width: 100%; height: 100%; background: rgb(0,0,0);position: absolute;z-index: 222;opacity: 0.4;">
</div> -->
<div class="singPanel">
<div class="qianming-container" >
<span style="margin: 0.3rem;">请在下方灰色区域内手写签名</span>
<span @click="closeSign" style="cursor: pointer;margin: 0.3rem 0.5rem;position: absolute;top: 0px;right: 0px;">X</span>
<div ref="esignDiv" style="background: rgb(246, 246, 246);border: 1px dashed rgb(185, 185, 185);margin: 0.3rem;border-radius: 0.2rem;overflow: hidden;">
<vueEsign ref="esign" style="width: 100%!important;height:83vh !important;margin-left: -0.3rem; "
:isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vueEsign>
</div>
<div class="contro-container" >
<el-button type="danger" @click="handleReset">清空画板</el-button>
<el-button type="primary" @click="handleGenerate">确定签名</el-button>
</div>
</div>
</div>
</div>
</template>我们使用了 <vueEsign></<vueEsign> 标签来调用 vue-esign 插件，并通过设置 width 和 height 属性来自定义签字区域的大小。然后在 handleGenerate方法中进行处理。
通过以上步骤，就可以在 Vue 项目中使用 vue-esign 插件，并根据需要进行调用和处理签字数据。
签名完成通过handleGenerate方法将签名转化为图片
//生成签名图片..
handleGenerate() {
this.$refs.esign.generate().then(res => {
this.handleReset();
this.signSuccess?this.signSuccess(res):'';
}).catch(err => {
console.log(err)
// this.$message.error('请签名之后提交！')
alert("请签名之后提交");
})
},3.2 拖拽效果
封装一个DragImg拖拽组件，将签名图片以及盖章图片都放在这个组件中，从而实现签名与章在pdf中的拖拽效果
3.3 pdf文件下载
考虑到pdf与签名或印章不在一个层级，要想实现签名和盖章效果，我们需要把签名(或盖章)的页面用html2canvas绘制出来，然后通过绘制的这些图片再去生成pdf，然后就可以下载了
.pdfViewer 是整个pdf的大小
.pageContainer 是每一页的内容
.dragImg 是你拖拽的签名或者印章，拖拽到第几页第几页有.dragImg内容
// 将签名或印章放到对应页面中
setSign() {
let parentElement = document.querySelector(".pdfViewer").children || []
let baseNum = 1263.85
let length = parentElement.length // 获取pdf页数
let promiseArr = []
// 循环页面
for (let i = 0; i < length; i++) {
this.$nextTick(() => {
// 页面中有样式名为dragImg的,代表该页面有签名或者签章
// 有签名或签章就绘制页面
if (parentElement[i].className == 'dragImg') {
const promise = new Promise((resolve, reject) => {
let html = parentElement[i]
let ele = html.querySelector('#pic')
let eleImg = html.querySelector('#pic div')
console.log(html, ele, ele.style.top)
let top = ele.style.top ? ele.style.top.split('px')[0] - 0 : 0
let topImg = eleImg.style.top ? eleImg.style.top.split('px')[0] - 0 : 0
let currentTop = top + topImg
console.log(currentTop, currentTop > baseNum)
if (currentTop > baseNum) {
console.log('第二个')
let j = Math.ceil(currentTop / baseNum)
let pageContainer = document.querySelector(".pdfViewer .pageContainer" + j)
html.style.top = 0
ele.style.top = 0
eleImg.style.top = currentTop - baseNum * (j - 1) + 'px'
console.log(currentTop, top, j, currentTop - baseNum * (j - 1))
pageContainer.appendChild(html)
promiseArr.push(promise)
resolve()
} else {
console.log('第一个')
let pageContainer = document.querySelector(".pdfViewer .pageContainer1")
pageContainer.appendChild(html)
promiseArr.push(promise)
resolve()
}
})
}
})
}
Promise.all(promiseArr).then(res => {
this.$nextTick(() => {
setTimeout(() => {
this.getPdf();
}, 500 * length)
})
})
},
4、依赖安装报错解决
npm install canvas@2.8.0 --ignore-scripts
只执行npm install canvas会报新的错误
源码资源下载：
https://download.csdn.net/download/weixin_45291798/88580529?spm=1001.2014.3001.5503
