子签章

因为babel默认不会转化node_modules中的包但是pdfjs-dist用了es6的东东

安装包

转化pdfjs-dist之所以分开写是因为pdfjs-dist里面有很多es6的语法但是我们只需要转化pdfjs-dist里面的web文件夹下的js文件resolve(node_modules/pdfjs-dist/web/pdf_viewer.js),resolve(node_modules/pdfjs-dist/build/pdf.js),resolve(node_modules/pdfjs-dist/build/pdf.worker.js),resolve(node_modules/pdfjs-dist/build/pdf.worker.entry.js)

问题二

classleft-title我的印章/divdraggablev-modelmainImagelist:group{

name:

}:sortfalseendendtransition-group

typetransitionli

//li/transition-group/draggable/el-colel-col

:span16

clickprevPage上一页/el-buttonel-button

clicknextPage下一页/el-buttonel-button

pageNum

}}页/el-buttonel-input-numberstylemargin:

5px;

5pxclassbtn-outline-darkv-modelpageNum:min1:maxnumPageslabel输入页码/el-input-numberel-button

clickcutover跳转/el-button/divcanvas

idthe-canvas

clickremoveSignature删除签章/el-buttonel-button

clickclearSignature清除所有签章/el-buttonel-button

clicksubmitSignature提交所有签章信息/el-button/div/el-colel-col

:span4

classright-item-title文件主题/divdiv

taskInfo.title

classright-item-title发起方/divdiv

taskInfo.uname

classright-item-title截止时间/divdiv

taskInfo.endtime

}}/div/div/div/div/el-col/el-row/div

/template

pdfjs-dist/es5/build/pdf.worker.entry;

import

require(pdfjs-dist/es5/build/pdf.js);

pdfjsLib.GlobalWorkerOptions.workerSrc

workerSrc;

this.canvasEle.getObjects()[0])

{return

[require(/assets/img/projectCenter/sign.png),

require(/assets/img/projectCenter/seal.png)];that.taskInfo

title:

};this.setPdfArea();},mounted()

{//

this.$message.error(已经显示最小比例);//

else

this.renderPage(this.pageNum);//

}//

this.$message.error(已经显示最大比例);//

else

this.renderPage(this.pageNum);//

}//

this.pdfDoc.getPage(num).then((page)

{let

viewport.height;_this.canvas.width

viewport.width;//

finishrenderTask.promise.then(()

{_this.pageRendering

pendingthis.renderPage(_this.pageNumPending);_this.pageNumPending

null;}});});},queueRenderPage(num)

{if

{this.renderPage(num);}},prevPage()

(this.pageNum

{return;}this.pageNum--;},nextPage()

(this.pageNum

{return;}this.pageNum;},cutover()

渲染pdf到时还会盖章信息在渲染时同时显示出来不应该在切换页码时才显示印章信息showpdf(pdfUrl)

{let

JSON.parse(localStorage.getItem(signs));

获取缓存字符串后转换为对象//

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

this.pdfDoc.numPages;this.renderPage(this.pageNum).then(()

this.canvas.height});});this.commonSign(this.pageNum,

true);});},/***

document.querySelector(#elesign).style.width

data.width

document.querySelector(#ele-canvas);let

pCenter

document.querySelector(.pCenter);canvaEle.width

canvaEle.height

(this.whDatas.height)*(this.scale);canvaEle.height

this.whDatas.height;this.canvasEle

new

document.querySelector(.canvas-container);container.style.position

50px;//

不能将图片拖拽到绘图区域外this.canvasEle.on(object:moving,

function

obj.getBoundingRect().top);obj.left

Math.max(obj.left,

obj.getBoundingRect().left);}//

bot-right

Math.min(obj.top,obj.canvas.height

obj.top

obj.getBoundingRect().top);obj.left

Math.min(obj.left,obj.canvas.width

obj.left

obj.getBoundingRect().left);}});},//

添加公章addSeal(sealUrl,

//图片缩小一this.canvasEle.add(oImg);});},//

{this.canvasEle.remove(this.canvasEle.getActiveObject());},//

isFirst

this.canvasEle.remove(this.canvasEle.clear());

清空页面所有签章let

JSON.parse(localStorage.getItem(signs));

获取缓存字符串后转换为对象//

{this.addSeal(datas[index].sealUrl,datas[index].left,datas[index].top,datas[index].index);}}},//

{let

JSON.parse(localStorage.getItem(signs));

获取缓存字符串后转换为对象let

this.mainImagelist[val.index],index:

val.index};i;}if

signDatas;}localStorage.setItem(signs,

对象转字符串后存储到缓存},//

console.log(JSON.parse(caches));return

false;},//

{this.canvasEle.remove(this.canvasEle.clear());

清空页面所有签章localStorage.removeItem(signs);

清除缓存},end(e)

{this.addSeal(this.mainImagelist[e.newDraggableIndex],e.originalEvent.layerX,e.originalEvent.layerY,e.newDraggableIndex);},//

{this.pdfUrl

res.data.data.pdfurl;this.$nextTick(()

接口返回的应该还有盖章信息不只是pdf});}},watch:

{whDatas:

console.log(this.whDatas);loading.close();this.renderFabric();this.canvasEvents();let

eleCanvas

document.querySelector(#ele-canvas);eleCanvas.style

border:1px

{this.commonSign(this.pageNum);this.queueRenderPage(this.pageNum);}}

/script

absolute;top:30%;left:49%;z-index:

99;

url(~/assets/img/projectCenter/tuo.png);background-repeat:

no-repeat;

classcontract-signature-viewdiv

classtitle合同签章/h2div

clickremoveSignature删除签章/el-buttonel-button

typedanger

clickclearSignature清空签章/el-buttonel-button

typeprimary

clicksubmitSignature提交签章/el-button/div/divdiv

classsection-box!--

classtext将示例印章标识拖到文件相应区域即可获取签章位置/p/div!--

--draggablev-modelmainImagelist:group{

name:

}:sortfalseendendtransition-group

mainImagelist:keyitem.imgclassitemstyletext-align:

centerimg

//li/transition-group/draggable/aside!--

主体区域

classslider-boxel-sliderclasssliderv-modelscale:min0.5:max2:step0.1:show-tooltipfalsechangesliderChange/span

classscale-value{{

--el-inputclassinput-boxv-model.numberpageNum:maxdefaultNumPageschangecutover/span

classdefault-text/{{

classele-canvas/canvas/div/divi

classloading

pdfjs-dist/es5/build/pdf.worker.entry;

const

require(pdfjs-dist/es5/build/pdf.js);

pdfjsLib.GlobalWorkerOptions.workerSrc

workerSrc;export

各页pdf的canvas-layoutcanvasLayoutTopList:

[],//

隐藏的input用来提交数据shadowInputValue:

};},created()

require(/assets/img/projectCenter/contract-sign-img.png)

}//

require(/assets/img/projectCenter/seal.png)

}];this.setPdfArea();},mounted()

{},methods:

decodeURIComponent(pdfStr.split()[1]);this.pdfUrl

./static/text.pdf;this.$nextTick(()

解析pdfshowpdf(pdfUrl)

this.pdfDoc.numPages;this.defaultNumPages

this.pdfDoc.numPages;this.$nextTick(()

{this.canvas

document.querySelectorAll(.the-canvas);this.canvas.forEach((item)

{this.ctx.push(item.getContext(2d));});//

循环渲染pdffor

{this.renderFabric();this.canvasEvents();},

1000);});});},//

设置pdf宽高缩放比例渲染pdfrenderPage(num)

{//

this.pdfDoc.getPage(num).then((page)

{const

viewport.height;this.canvas[num

1].width

viewport};page.render(renderContext);});},//

{this.whDatas

document.querySelectorAll(.canvas-layout);//

循环遍历canvasLayoutDom.forEach((item)

{this.canvasLayoutTopList.push({

obj:

item.querySelector(.ele-canvas);//

pCenter

item.querySelector(.the-canvas);//

pCenter.clientWidth;canvasEle.height

创建fabric对象并存储this.canvasEle.push(new

container

item.querySelector(.canvas-container);container.style.position

translateX(-50%);container.style.top

0px;});//

document.querySelector(.out-view);//

开启监听窗口滚动this.outViewScroll();},//

{this.outViewDom.addEventListener(scroll,

{this.outViewDom.removeEventListener(scroll,

窗口滚动outViewRun()

this.outViewDom.scrollTop;const

topList

this.canvasLayoutTopList.map((item)

item.top);//

增加一个最大值topList.push(Number.MAX_SAFE_INTEGER);for

(let

scale滑块,重新渲染整个pdfsliderChange()

{this.pageNum

this.outViewScrollClose();this.whDatas

name:

}];this.getSignatureJson();setTimeout(()

{this.numPages

this.pdfDoc.numPages;this.$nextTick(()

{this.canvas

document.querySelectorAll(.the-canvas);this.canvas.forEach((item)

{this.ctx.push(item.getContext(2d));});//

循环渲染pdffor

{this.renderFabric();this.canvasEvents();},

1000);});},

签章拖拽边界处理不能将图片拖拽到绘图区域外canvasEvents()

(e)

obj.getBoundingRect().top);obj.left

Math.max(obj.left,

obj.getBoundingRect().left);}//

bot-right

Math.min(obj.top,obj.canvas.height

obj.top

obj.getBoundingRect().top);obj.left

Math.min(obj.left,obj.canvas.width

obj.left

obj.getBoundingRect().left);}//

console.log(obj.cacheKey,obj.cacheKey);const

findIndex

this.coordinateList.slice(1).findIndex((coord)

coord.cacheKey

this.scale);});this.getSignatureJson();});});},//

拖拽结束end(e)

e.originalEvent.target.parentElement.parentElement;const

findIndex

this.canvasLayoutTopList.findIndex((item)

item.obj

Math.ceil(e.originalEvent.layerX

this.scale);const

Math.ceil(e.originalEvent.layerY

this.scale);//

findIndex);this.addSeal({sealUrl:

this.mainImagelist[e.newDraggableIndex].img,left,top,index:

findIndex});},//

true});this.canvasEle[pageNum].add(oImg);//

pageNum,

this.coordinateList.filter((item)

item.page

this.canvasEle[pageNum].getObjects()[length];//

拼接数据const

Math.ceil(currentSignInfo[item]

currentSignInfo.cacheKey;obj.sealUrl

sealUrl;obj.index

${this.mainImagelist[index].name}${this.coordinateList.length};obj.page

pageNum

1;this.coordinateList.push(obj);this.getSignatureJson();},//

{//

this.coordinateList.slice(1);//

keys

[];signatureList.forEach((item)

{const

item[key];});arr.push(obj);});//

操作相关部分*///

滚动到指定位置this.outViewDom.scrollTop

this.canvasLayoutTopList[this.pageNum

1].top;},//

滚动到指定位置this.outViewDom.scrollTop

this.canvasLayoutTopList[this.pageNum

1].top;},//

滚动到指定位置this.outViewDom.scrollTop

this.canvasLayoutTopList[this.pageNum

1].top;setTimeout(()

{item.discardActiveObject().renderAll();});},//

{//

this.$message.error(请选择要删除的签章);//

(findItem.length

this.$message.error(只能选择删除一个签章,请重新选择);}//

activeObj

findItem[0].getActiveObject();const

findIndex

this.coordinateList.findIndex((item)

item.cacheKey

删除选中的签章findItem[0].remove(activeObj);//

删除选中的签章的信息this.coordinateList.splice(findIndex,

1);this.getSignatureJson();},//

清空签章clearSignature()

{item.clear();});this.coordinateList

name:

}];this.getSignatureJson();},//

{console.log(this.coordinateList,

/script