vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
更新時(shí)間：2023年12月22日 16:14:30 作者：coderdwy
最近領(lǐng)導(dǎo)提了一個(gè)新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧
一、需求
最近領(lǐng)導(dǎo)提了一個(gè)新需求：仿照e簽寶，實(shí)現(xiàn)pdf電子簽章！
最終實(shí)現(xiàn)效果圖
這是做出來的效果圖，當(dāng)然還有很多待修改
二、思路
然后我就去看了下人家e簽寶的操作界面，左側(cè)是印章，右側(cè)是pdf，然后拖拽印章到pdf上面，點(diǎn)擊保存，下次打開時(shí)顯示印章的位置。
思路：我首先想到了拖拽、pdf預(yù)覽、坐標(biāo)；分工明確，前端來實(shí)現(xiàn)拖拽，pdf預(yù)覽及把印章信息和坐標(biāo)傳給后端，后端只需要把信息和坐標(biāo)保存下來就可以了。
三、使用插件
之前實(shí)現(xiàn)pdf預(yù)覽就是通過window.open，打開一個(gè)窗口，顯示pdf，功能很多，但是和需求不符，需要做的事是把pdf顯示出來，同時(shí)可以可以拖拽印章到上面去，也不要放大與縮小及其他的功能。百度下了，說是用pdfjs-dist，這個(gè)pdf插件可以自定義很多的功能，但是實(shí)際用起來，發(fā)現(xiàn)好坑。。最后去百度了下，vue實(shí)現(xiàn)pdf電子簽章， 看有沒有現(xiàn)成的，然后還真找到了一個(gè)。js處理pdf展示、分頁(yè)和簽章等功能，下載到本地(只許查看index.html文件即可)后發(fā)現(xiàn)大佬用的不是vue-cli腳手架，是引用的cdn鏈接，然后就cv到項(xiàng)目里面了，跟著步驟，安裝了pdfjs-dist插件(pdf插件)和fabric插件(專門處理印章的插件)這兩個(gè)插件，但是項(xiàng)目本地運(yùn)行后，報(bào)錯(cuò)了。。
四、遇到的問題
1.TypeError: Cannot read properties of undefined( reading 'Globalworkeroptions ')
百思不得其解啊，照著步驟來的啊，為啥呢，然后又回去看了下大佬的代碼，發(fā)現(xiàn)他的pdf.js不是用的pdfjs-dist，而是引入的pdf的cdn鏈接
然后我就在項(xiàng)目的public/index.html下面引入這個(gè)鏈接
pdf路徑則是使用的一個(gè)在線的pdf鏈接，https://www.gjtool.cn/pdfh5/git.pdf，發(fā)現(xiàn)可以打開了（樣式做了些修改）
2.Dev Tools failed to load source map: Could not load content for https //mozilla github.ia/pdf js/build/pdf js map: Load canceled due to loadtimeout
開始覺得似乎已經(jīng)大功告成了，到時(shí)候和后端商量下返回?cái)?shù)據(jù)的格式就完事了的，誰(shuí)知道還是有問題的。。多次打開關(guān)閉pdf后，有時(shí)候pdf會(huì)不加載出來了。人麻了，然后看了下提示，加載超時(shí)了，取消加載。
明顯是cdn鏈接的問題，那就把pdf.js文件下載到本地唄，本地加載快，應(yīng)該不會(huì)出現(xiàn)加載超時(shí)的問題，結(jié)果還是有問題。
唉，真的是服了，使用cdn鏈接吧，會(huì)加載超時(shí)，下載到本地引用吧，又會(huì)報(bào)這么個(gè)莫名其妙的問題，然后今天瀏覽博客時(shí)，發(fā)現(xiàn)一個(gè)兄弟碰到了一樣的問題，哈哈，發(fā)現(xiàn)還是引入pdf方式的問題
/* 引用cdn鏈接，可以使用但會(huì)加載超時(shí) */
// let pdfjsLib = window["pdfjs-dist/build/pdf"];
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
/* 下載到本地，看著官方文檔引用，報(bào)個(gè)莫名其妙的錯(cuò) */
// import pdfjsLib from 'pdfjs-dist';
// pdfjsLib.GlobalWorkerOptions.workerSrc='pdfjs-dist/build/pdf.worker.js';
/* 下載到本地，照著大佬的方式引用，完美！ */
let pdfjsLib =require("pdfjs-dist/legacy/build/pdf.js");
import workerSrc from "pdfjs-dist/legacy/build/pdf.worker.entry";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
這是大佬的博客鏈接pdf.js 使用攻略及錯(cuò)誤集合
不過這項(xiàng)目的電子簽章有些與眾不同，用戶打開的pdf，是可以自定義的，即用戶打開彈窗，在tinymac編輯器里面輸入內(nèi)容，然后切換tab，會(huì)立即生成一個(gè)pdf，接下來才是用戶使用電子簽章的過程
以下是電子簽章的主要代碼，和大佬的index.html的代碼差不多，就是做了點(diǎn)修改（ps：目前印章的位置和坐標(biāo)保存，使用的得本地緩存，便于調(diào)試，后期會(huì)保存到接口里面?。?/p>
代碼部分
首先 引入pdfjs-dist插件和fabric插件
npm install pdfjs-dist
npm i fabric --save
2023年10月12日修改
pdfjs-dist的安裝版本盡量安裝2.0的版本，如 npm install pdfjs-dist@2.16.105 --save，不然直接安裝最新的pdfjs-dist版本可能出現(xiàn)pdf不顯示的問題
html部分
<div id="elesign" class="elesign">
<el-row>
<el-col :span="4" style="margin-top:1%;">
<div class="left-title">我的印章</div>
<draggable v-model="mainImagelist" :group="{ name: 'itext', pull: 'clone' }" :sort="false" @end="end">
<transition-group type="transition">
<li v-for="item in mainImagelist" :key="item" class="item" style="text-align:center;">
<img :src="item" width="100%;" height="100%" class="imgstyle" />
</li>
</transition-group>
</draggable>
</el-col>
<el-col :span="16" style="text-align:center;" class="pCenter">
<div class="page">
<!-- <el-button class="btn-outline-dark" @click="zoomIn">-</el-button>
<span style="color:red;">{{(percentage*100).toFixed(0)+'%'}}</span>
<el-button class="btn-outline-dark" @click="zoomOut">+</el-button> -->
<el-button class="btn-outline-dark" @click="prevPage">上一頁(yè)</el-button>
<el-button class="btn-outline-dark" @click="nextPage">下一頁(yè)</el-button>
<el-button class="btn-outline-dark">{{ pageNum }}/{{ numPages }}頁(yè)</el-button>
<el-input-number style="margin:0 5px;border-radius:5px;" class="btn-outline-dark" v-model="pageNum" :min="1" :max="numPages" label="輸入頁(yè)碼"></el-input-number>
<el-button class="btn-outline-dark" @click="cutover">跳轉(zhuǎn)</el-button>
</div>
<canvas id="the-canvas" />
<!-- 蓋章部分 -->
<canvas id="ele-canvas"></canvas>
<div class="ele-control" style="margin-bottom:2%;">
<el-button class="btn-outline-dark" @click="removeSignature"> 刪除簽章</el-button>
<el-button class="btn-outline-dark" @click="clearSignature"> 清除所有簽章</el-button>
<el-button class="btn-outline-dark" @click="submitSignature">提交所有簽章信息</el-button>
</div>
</el-col>
<el-col :span="4" style="margin-top:1%;">
<div class="left-title">任務(wù)信息</div>
<div style="text-align:center;">
<div>
<div class="right-item">
<div class="right-item-title">文件主題</div>
<div class="detail-item-desc">{{ taskInfo.title }}</div>
</div>
<div class="right-item">
<div class="right-item-title">發(fā)起方</div>
<div class="detail-item-desc">{{ taskInfo.uname }}</div>
</div>
<div class="right-item">
<div class="right-item-title">截止時(shí)間</div>
<div class="detail-item-desc">{{ taskInfo.endtime }}</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>js部分
import {fabric} from 'fabric';
let pdfjsLib =require("pdfjs-dist/legacy/build/pdf.js");
import workerSrc from "pdfjs-dist/legacy/build/pdf.worker.entry";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
import draggable from "vuedraggable";
export default {
components: {draggable},
data() {
return {
//pdf預(yù)覽
pdfUrl: '',
pdfDoc: null,
numPages: 1,
pageNum: 1,
scale: 2.2,
pageRendering: false,
pageNumPending: null,
sealUrl: '',
signUrl: '',
canvas: null,
ctx: null,
canvasEle: null,
whDatas: null,
mainImagelist: [],
taskInfo: {},
}
},
computed: {
hasSigna() {
return this.canvasEle && this.canvasEle.getObjects()[0] ? true : false;
},
},
created(){
var that = this;
that.mainImagelist = [require('./sign.png'),require('./seal.png')];
that.taskInfo = {'title':'測(cè)試蓋章', uname:'張三', endtime:'2021-09-01 17:59:59'};
},
methods: {
//pdf預(yù)覽
// zoomIn() {
// console.log("縮小");
// if(this.scale<=0.5){
// this.$message.error("已經(jīng)顯示最小比例")
// }else{
// this.scale-=0.1;
// this.percentage-=0.1;
// this.renderPage(this.pageNum);
// this.renderFabric();
// }
// },
// zoomOut() {
// console.log("放大")
// if(this.scale>=2.2){
// this.$message.error('已經(jīng)顯示最大比例')
// }else{
// this.scale+=0.1;
// this.percentage+=0.1;
// this.renderPage(this.pageNum);
// this.renderFabric();
// }
// },
renderPage(num) {
let _this = this;
this.pageRendering = true;
return this.pdfDoc.getPage(num).then((page) => {
let viewport = page.getViewport({ scale: _this.scale });//設(shè)置視口大小
_this.canvas.height = viewport.height;
_this.canvas.width = viewport.width;
// Render PDF page into canvas context
let renderContext = {
canvasContext: _this.ctx,
viewport: viewport,
};
let renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(() => {
_this.pageRendering = false;
if (_this.pageNumPending !== null) {
// New page rendering is pending
this.renderPage(_this.pageNumPending);
_this.pageNumPending = null;
}
});
});
},
queueRenderPage(num) {
if (this.pageRendering) {
this.pageNumPending = num;
} else {
this.renderPage(num);
}
},
prevPage() {
this.confirmSignature();
if (this.pageNum <= 1) {
return;
}
this.pageNum--;
},
nextPage() {
this.confirmSignature();
if (this.pageNum >= this.numPages) {
return;
}
this.pageNum++;
},
cutover() {
this.confirmSignature();
},
//渲染pdf，到時(shí)還會(huì)蓋章信息，在渲染時(shí)，同時(shí)顯示出來，不應(yīng)該在切換頁(yè)碼時(shí)才顯示印章信息
showpdf(pdfUrl) {
let caches = JSON.parse(localStorage.getItem('signs')); //獲取緩存字符串后轉(zhuǎn)換為對(duì)象
console.log(caches);
if(caches == null) return false;
let datas = caches[this.pageNum];
if(datas != null && datas != undefined) {
for (let index in datas) {
this.addSeal(datas[index].sealUrl, datas[index].left, datas[index].top, datas[index].index);
}
}
this.canvas = document.getElementById("the-canvas");
this.ctx = this.canvas.getContext("2d");
pdfjsLib.getDocument({url:pdfUrl, rangeChunkSize:65536, disableAutoFetch:false}).promise.then((pdfDoc_) => {
this.pdfDoc = pdfDoc_;
this.numPages = this.pdfDoc.numPages;
this.renderPage(this.pageNum).then(() => {
this.renderPdf({
width: this.canvas.width,
height: this.canvas.height,
});
});
this.commonSign(this.pageNum, true);
});
},
/**
* 蓋章部分開始
*/
// 設(shè)置繪圖區(qū)域?qū)捀?
renderPdf(data) {
this.whDatas = data;
// document.querySelector("#elesign").style.width = data.width + "px";
},
// 生成繪圖區(qū)域
renderFabric() {
let canvaEle = document.querySelector("#ele-canvas");
let pCenter=document.querySelector(".pCenter");
canvaEle.width = pCenter.clientWidth;
// canvaEle.height = (this.whDatas.height)*(this.scale);
canvaEle.height = this.whDatas.height;
this.canvasEle = new fabric.Canvas(canvaEle);
let container = document.querySelector(".canvas-container");
container.style.position = "absolute";
container.style.top = "50px";
// container.style.left = "30%";
},
// 相關(guān)事件操作喲
canvasEvents() {
// 拖拽邊界 不能將圖片拖拽到繪圖區(qū)域外
this.canvasEle.on("object:moving", function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
},
// 添加公章
addSeal(sealUrl, left, top, index) {
fabric.Image.fromURL(
sealUrl,
(oImg) => {
oImg.set({
left: left,
top: top,
// angle: 10,
scaleX: 0.8,
scaleY: 0.8,
index:index,
});
// oImg.scale(0.5); //圖片縮小一
this.canvasEle.add(oImg);
}
);
},
// 刪除簽章
removeSignature() {
this.canvasEle.remove(this.canvasEle.getActiveObject())
},
//翻頁(yè)展示蓋章信息
commonSign(pageNum, isFirst = false) {
if(isFirst == false) this.canvasEle.remove(this.canvasEle.clear()); //清空頁(yè)面所有簽章
let caches = JSON.parse(localStorage.getItem('signs')); //獲取緩存字符串后轉(zhuǎn)換為對(duì)象
console.log(caches);
if(caches == null) return false;
let datas = caches[this.pageNum];
if(datas != null && datas != undefined) {
for (let index in datas) {
this.addSeal(datas[index].sealUrl, datas[index].left, datas[index].top, datas[index].index);
}
}
},
//確認(rèn)簽章位置并保存到緩存
confirmSignature() {
let data = this.canvasEle.getObjects(); //獲取當(dāng)前頁(yè)面內(nèi)的所有簽章信息
let caches = JSON.parse(localStorage.getItem('signs')); //獲取緩存字符串后轉(zhuǎn)換為對(duì)象
let signDatas = {}; //存儲(chǔ)當(dāng)前頁(yè)的所有簽章信息
let i = 0;
// let sealUrl = '';
for(var val of data) {
signDatas[i] = {
width: val.width,
height: val.height,
top: val.top,
left: val.left,
angle: val.angle,
translateX: val.translateX,
translateY: val.translateY,
scaleX: val.scaleX,
scaleY: val.scaleY,
pageNum: this.pageNum,
sealUrl: this.mainImagelist[val.index],
index:val.index
}
i++;
}
if(caches == null) {
caches = {};
caches[this.pageNum] = signDatas;
} else {
caches[this.pageNum] = signDatas;
}
localStorage.setItem('signs', JSON.stringify(caches)); //對(duì)象轉(zhuǎn)字符串后存儲(chǔ)到緩存
},
//提交數(shù)據(jù)
submitSignature() {
this.confirmSignature();
let caches = localStorage.getItem('signs');
console.log(JSON.parse(caches));
return false
},
//清空數(shù)據(jù)
clearSignature() {
this.canvasEle.remove(this.canvasEle.clear()); //清空頁(yè)面所有簽章
localStorage.removeItem('signs'); //清除緩存
},
end(e){
this.addSeal(this.mainImagelist[e.newDraggableIndex], e.originalEvent.layerX, e.originalEvent.layerY, e.newDraggableIndex)
},
//設(shè)置PDF預(yù)覽區(qū)域高度
setPdfArea(){
this.pdfUrl = 'https://www.gjtool.cn/pdfh5/git.pdf';
this.pdfurl=res.data.data.pdfurl;
this.$nextTick(() => {
this.showpdf(this.pdfUrl);//接口返回的應(yīng)該還有蓋章信息，不只是pdf
});
},
},
watch: {
whDatas: {
handler() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
if (this.whDatas) {
console.log(this.whDatas)
loading.close();
this.renderFabric();
this.canvasEvents();
let eleCanvas=document.querySelector("#ele-canvas");
eleCanvas.style="border:1px solid #5ea6ef";
}
},
},
pageNum: function() {
this.commonSign(this.pageNum);
this.queueRenderPage(this.pageNum);
}
}
},css部分
<style scoped>
/*pdf部分*/
.pCenter{
overflow-x: hidden;
}
#the-canvas{
margin-top:10px;
}
html:fullscreen {
background: white;
}
.elesign {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
/* padding-left: 180px; */
margin: auto;
/* width:600px; */
}
.page {
text-align:center;
margin:0 auto;
margin-top: 1%;
}
#ele-canvas {
/* border: 1px solid #5ea6ef; */
overflow: hidden;
}
.ele-control {
text-align: center;
margin-top: 3%;
}
#page-input {
width: 7%;
}
@keyframes ani-demo-spin {
from { transform: rotate(0deg);}
50% { transform: rotate(180deg);}
to { transform: rotate(360deg);}
}
/* .loadingclass{
position: absolute;
top:30%;
left:49%;
z-index: 99;
} */
.left {
position: absolute;
top: 42px;
left: -5px;
padding: 5px 5px;
/*border: 1px solid #eee;*/
/*border-radius: 4px;*/
}
.left-title {
text-align:center;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
li {
list-style-type:none;
padding: 10px;
}
.imgstyle{
vertical-align: middle;
width: 130px;
border: solid 1px #e8eef2;
background-image: url("tuo.png");
background-repeat:no-repeat;
}
.right {
position: absolute;
top: 7px;
right: -177px;
margin-top: 34px;
padding-top: 10px;
padding-bottom: 20px;
width: 152px;
/*border: 1px solid #eee;*/
/*border-radius: 4px;*/
}
.right-item {
margin-bottom: 15px;
margin-left: 10px;
}
.right-item-title {
color: #777;
height: 20px;
line-height: 20px;
font-size: 12px;
font-weight: 400;
text-align: left !important;
}
.detail-item-desc {
color: #333;
line-height: 20px;
width: 100%;
font-size: 12px;
display: inline-block;
text-align: left;
}
.btn-outline-dark {
color: #0f1531;
background-color: transparent;
background-image: none;
border:1px solid #3e4b5b;
}
.btn-outline-dark:hover {
color: #fff;
background-color: #3e4b5b;
border-color: #3e4b5b;
}2022.9.13修改
使用的時(shí)候，發(fā)現(xiàn)在pdf第一頁(yè)添加的印章，下次再打開時(shí)，不在顯示，本地緩存的也是顯示{}，所以琢磨了下，應(yīng)該是每次打開pdf頁(yè)面重置了，代碼做了以下修改
將選中部分改為以下代碼
到此這篇關(guān)于vue里面使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的文章就介紹到這了,更多相關(guān)vue pdf電子簽章內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了封裝一個(gè)更易用的Dialog組件過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue全局自適應(yīng)大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項(xiàng)目中使用postcss-pxtorem插件實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),postcss-pxtorem可以自動(dòng)將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實(shí)現(xiàn)更好的自適應(yīng)布局,通過配置postcss-pxtorem插件,可以在構(gòu)建時(shí)自動(dòng)完成轉(zhuǎn)換,無需手動(dòng)修改代碼2025-01-01
前端vue2使用國(guó)密SM4進(jìn)行加密、解密具體方法
SM4是一種對(duì)稱加密算法,類似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫(kù)加密、網(wǎng)絡(luò)通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關(guān)于前端vue2使用國(guó)密SM4進(jìn)行加密、解密的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue中嵌入可浮動(dòng)的第三方網(wǎng)頁(yè)窗口的示例詳解
本文介紹了在Vue2項(xiàng)目中嵌入可浮動(dòng)的第三方網(wǎng)頁(yè)窗口的實(shí)現(xiàn)方法,包括使用iframe、div+script和dialog元素等方式,并提供了一個(gè)實(shí)戰(zhàn)Demo,展示了如何在Vue組件中動(dòng)態(tài)加載和控制浮窗的顯示,需要的朋友可以參考下2025-02-02
使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置
這篇文章主要介紹了使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue 過渡（動(dòng)畫）transition組件案例詳解
這篇文章主要介紹了Vue 過渡（動(dòng)畫）transition組件案例詳解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js中class與style的增強(qiáng)綁定實(shí)現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯(cuò)，因此，Vue.js 做了專門的增強(qiáng)，表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組，本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識(shí)，感興趣的朋友一起看看吧2023-04-04
? Vue.js就是一套輕量級(jí)的 MVVM 框架,本文通過實(shí)例代碼給大家介紹Vue 簡(jiǎn)介及基本使用教程,感興趣的朋友跟隨小編一起看看吧2025-10-10