devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue2 之 实现pdf电子签章_pdfjs-dist+fabric实现pdf电子签章

作者：码创造者 | 2024-07-25 12:48:09

赞

踩

pdfjs-dist+fabric实现pdf电子签章

一、前情提要

1. 需求

仿照e签宝，实现pdf电子签章 => 拿到pdf链接，移动章的位置，获取章的坐标

技术 : 使用fabric + pdfjs-dist + vuedraggable

2. 借鉴

一位大佬的代码仓亏 : 地址

一位大佬写的文章 ：地址

3. 优化

在大佬的代码基础上，进行了些许优化，变的更像e签宝

二、下载

ps : 怕版本不同，导致无法运行，请下载指定版本

1. fabric

fabric : 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库

npm install fabric@5.3.0

2. pdfjs-dist

npm install pdfjs-dist@2.5.207

问题一

注意 : 最好配置一下babel，因为打包的时候可能会报错

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

  1. // 安装包
  2. npm install babel-loader @babel/core @babel/preset-env -D

在webpack.config.js中配置

  1. {
  2.   test: /\.js$/,
  3.   loader: 'babel-loader',
  4.   include: [
  5.     resolve('src'),
  6.     // 转化pdfjs-dist，之所以分开写，是因为pdfjs-dist里面有很多es6的语法，但是我们只需要转化pdfjs-dist里面的web文件夹下的js文件
  7.     resolve('node_modules/pdfjs-dist/web/pdf_viewer.js'),
  8.     resolve('node_modules/pdfjs-dist/build/pdf.js'),
  9.     resolve('node_modules/pdfjs-dist/build/pdf.worker.js'),
  10.     resolve('node_modules/pdfjs-dist/build/pdf.worker.entry.js')        ]
  11. },

问题二 

pdf.js文件过大，可以给 .babelrc 加上属性，"compact": false

3. vuedraggable

npm install vuedraggable@2.24.3

三、代码

1. 准备pdf文件

text.pdf 可放置在 src/static 文件夹中

ps : 线上最好让后端返回pdf链接，因为存在pdf跨域问题

2. 大佬的代码

  1. <!-- //?模块说明 =>  合同签章模块 -->
  2. <template>
  3.   <div id="elesign" class="elesign">
  4.     <el-row>
  5.       <el-col :span="4" style="margin-top: 1%">
  6.         <div class="left-title">我的印章</div>
  7.         <draggable
  8.           v-model="mainImagelist"
  9.           :group="{ name: 'itext', pull: 'clone' }"
  10.           :sort="false"
  11.           @end="end"
  12.         >
  13.           <transition-group type="transition">
  14.             <li v-for="item in mainImagelist" :key="item" class="item" style="text-align: center">
  15.               <img :src="item" width="100%;" height="100%" class="imgstyle" />
  16.             </li>
  17.           </transition-group>
  18.         </draggable>
  19.       </el-col>
  20.       <el-col :span="16" style="text-align: center" class="pCenter">
  21.         <div class="page">
  22.           <!-- <el-button class="btn-outline-dark" @click="zoomIn">-</el-button>
  23.           <span style="color: red">{{ (percentage * 100).toFixed(0) + '%' }}</span>
  24.           <el-button class="btn-outline-dark" @click="zoomOut">+</el-button> -->
  25.           <el-button class="btn-outline-dark" @click="prevPage">上一页</el-button>
  26.           <el-button class="btn-outline-dark" @click="nextPage">下一页</el-button>
  27.           <el-button class="btn-outline-dark">{{ pageNum }}/{{ numPages }}页</el-button>
  28.           <el-input-number
  29.             style="margin: 0 5px; border-radius: 5px"
  30.             class="btn-outline-dark"
  31.             v-model="pageNum"
  32.             :min="1"
  33.             :max="numPages"
  34.             label="输入页码"
  35.           ></el-input-number>
  36.           <el-button class="btn-outline-dark" @click="cutover">跳转</el-button>
  37.         </div>
  38.         <canvas id="the-canvas" />
  39.         <!-- 盖章部分 -->
  40.         <canvas id="ele-canvas"></canvas>
  41.         <div class="ele-control" style="margin-bottom: 2%">
  42.           <el-button class="btn-outline-dark" @click="removeSignature">删除签章</el-button>
  43.           <el-button class="btn-outline-dark" @click="clearSignature">清除所有签章</el-button>
  44.           <el-button class="btn-outline-dark" @click="submitSignature">提交所有签章信息</el-button>
  45.         </div>
  46.       </el-col>
  47.       <el-col :span="4" style="margin-top: 1%">
  48.         <div class="left-title">任务信息</div>
  49.         <div style="text-align: center">
  50.           <div>
  51.             <div class="right-item">
  52.               <div class="right-item-title">文件主题</div>
  53.               <div class="detail-item-desc">{{ taskInfo.title }}</div>
  54.             </div>
  55.             <div class="right-item">
  56.               <div class="right-item-title">发起方</div>
  57.               <div class="detail-item-desc">{{ taskInfo.uname }}</div>
  58.             </div>
  59.             <div class="right-item">
  60.               <div class="right-item-title">截止时间</div>
  61.               <div class="detail-item-desc">{{ taskInfo.endtime }}</div>
  62.             </div>
  63.           </div>
  64.         </div>
  65.       </el-col>
  66.     </el-row>
  67.   </div>
  68. </template>
  69. <script>
  70. import draggable from 'vuedraggable';
  71. import { fabric } from 'fabric';
  72. import workerSrc from 'pdfjs-dist/es5/build/pdf.worker.entry';
  73. import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
  74. const pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');
  75. pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
  76. export default {
  77.   components: { draggable },
  78.   data() {
  79.     return {
  80.       // pdf预览
  81.       pdfUrl: '',
  82.       pdfDoc: null,
  83.       numPages: 1,
  84.       pageNum: 1,
  85.       scale: 2.2,
  86.       pageRendering: false,
  87.       pageNumPending: null,
  88.       sealUrl: '',
  89.       signUrl: '',
  90.       canvas: null,
  91.       ctx: null,
  92.       canvasEle: null,
  93.       whDatas: null,
  94.       mainImagelist: [],
  95.       taskInfo: {}
  96.       // percentage: 1
  97.     };
  98.   },
  99.   computed: {
  100.     hasSigna() {
  101.       if (this.canvasEle && this.canvasEle.getObjects()[0]) {
  102.         return true;
  103.       } else {
  104.         return false;
  105.       }
  106.     }
  107.   },
  108.   created() {
  109.     var that = this;
  110.     that.mainImagelist = [require('@/assets/img/projectCenter/sign.png'), require('@/assets/img/projectCenter/seal.png')];
  111.     that.taskInfo = { title: '测试盖章', uname: '张三', endtime: '2021-09-01 17:59:59' };
  112.     this.setPdfArea();
  113.   },
  114.   mounted() {
  115.     // this.showpdf(this.pdfUrl);
  116.     if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
  117.       // eslint-disable-next-line no-alert
  118.       alert('Please build the pdfjs-dist library using\n  `gulp dist-install`');
  119.     }
  120.   },
  121.   methods: {
  122.     // pdf预览
  123.     // zoomIn() {
  124.     //   console.log('缩小');
  125.     //   if (this.scale <= 0.5) {
  126.     //     this.$message.error('已经显示最小比例');
  127.     //   } else {
  128.     //     this.scale -= 0.1;
  129.     //     this.percentage -= 0.1;
  130.     //     this.renderPage(this.pageNum);
  131.     //     this.renderFabric();
  132.     //   }
  133.     // },
  134.     // zoomOut() {
  135.     //   console.log('放大');
  136.     //   if (this.scale >= 2.2) {
  137.     //     this.$message.error('已经显示最大比例');
  138.     //   } else {
  139.     //     this.scale += 0.1;
  140.     //     this.percentage += 0.1;
  141.     //     this.renderPage(this.pageNum);
  142.     //     this.renderFabric();
  143.     //   }
  144.     // },
  145.     renderPage(num) {
  146.       let _this = this;
  147.       this.pageRendering = true;
  148.       return this.pdfDoc.getPage(num).then((page) => {
  149.         let viewport = page.getViewport({ scale: _this.scale }); // 设置视口大小
  150.         _this.canvas.height = viewport.height;
  151.         _this.canvas.width = viewport.width;
  152.  
  153.         // Render PDF page into canvas context
  154.         let renderContext = {
  155.           canvasContext: _this.ctx,
  156.           viewport: viewport
  157.         };
  158.         let renderTask = page.render(renderContext);
  159.         // Wait for rendering to finish
  160.         renderTask.promise.then(() => {
  161.           _this.pageRendering = false;
  162.           if (_this.pageNumPending !== null) {
  163.             // New page rendering is pending
  164.             this.renderPage(_this.pageNumPending);
  165.             _this.pageNumPending = null;
  166.           }
  167.         });
  168.       });
  169.     },
  170.     queueRenderPage(num) {
  171.       if (this.pageRendering) {
  172.         this.pageNumPending = num;
  173.       } else {
  174.         this.renderPage(num);
  175.       }
  176.     },
  177.     prevPage() {
  178.       this.confirmSignature();
  179.       if (this.pageNum <= 1) {
  180.         return;
  181.       }
  182.       this.pageNum--;
  183.     },
  184.     nextPage() {
  185.       this.confirmSignature();
  186.       if (this.pageNum >= this.numPages) {
  187.         return;
  188.       }
  189.       this.pageNum++;
  190.     },
  191.     cutover() {
  192.       this.confirmSignature();
  193.     },
  194.     // 渲染pdf，到时还会盖章信息，在渲染时，同时显示出来，不应该在切换页码时才显示印章信息
  195.     showpdf(pdfUrl) {
  196.       let caches = JSON.parse(localStorage.getItem('signs')); // 获取缓存字符串后转换为对象
  197.       // console.log(caches);
  198.  
  199.       if (caches != null) {
  200.         let datas = caches[this.pageNum];
  201.         if (datas != null && datas != undefined) {
  202.           for (let index in datas) {
  203.             this.addSeal(
  204.               datas[index].sealUrl,
  205.               datas[index].left,
  206.               datas[index].top,
  207.               datas[index].index
  208.             );
  209.           }
  210.         }
  211.       }
  212.  
  213.       this.canvas = document.getElementById('the-canvas');
  214.       this.ctx = this.canvas.getContext('2d');
  215.       pdfjsLib
  216.         .getDocument({ url: pdfUrl, rangeChunkSize: 65536, disableAutoFetch: false })
  217.         .promise.then((pdfDoc_) => {
  218.           this.pdfDoc = pdfDoc_;
  219.           this.numPages = this.pdfDoc.numPages;
  220.           this.renderPage(this.pageNum).then(() => {
  221.             this.renderPdf({
  222.               width: this.canvas.width,
  223.               height: this.canvas.height
  224.             });
  225.           });
  226.           this.commonSign(this.pageNum, true);
  227.         });
  228.     },
  229.     /**
  230.      *  盖章部分开始
  231.      */
  232.     // 设置绘图区域宽高
  233.     renderPdf(data) {
  234.       this.whDatas = data;
  235.       // document.querySelector("#elesign").style.width = data.width + "px";
  236.     },
  237.     // 生成绘图区域
  238.     renderFabric() {
  239.       let canvaEle = document.querySelector('#ele-canvas');
  240.       let pCenter = document.querySelector('.pCenter');
  241.       canvaEle.width = pCenter.clientWidth;
  242.       // canvaEle.height = (this.whDatas.height)*(this.scale);
  243.       canvaEle.height = this.whDatas.height;
  244.  
  245.       this.canvasEle = new fabric.Canvas(canvaEle);
  246.       let container = document.querySelector('.canvas-container');
  247.       container.style.position = 'absolute';
  248.       container.style.top = '50px';
  249.       // container.style.left = "30%";
  250.     },
  251.     // 相关事件操作哟
  252.     canvasEvents() {
  253.       // 拖拽边界 不能将图片拖拽到绘图区域外
  254.       this.canvasEle.on('object:moving', function (e) {
  255.         var obj = e.target;
  256.         // if object is too big ignore
  257.         if (obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width) {
  258.           return;
  259.         }
  260.         obj.setCoords();
  261.         // top-left  corner
  262.         if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
  263.           obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
  264.           obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
  265.         }
  266.         // bot-right corner
  267.         if (
  268.           obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height ||
  269.           obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width
  270.         ) {
  271.           obj.top = Math.min(
  272.             obj.top,
  273.             obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top
  274.           );
  275.           obj.left = Math.min(
  276.             obj.left,
  277.             obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left
  278.           );
  279.         }
  280.       });
  281.     },
  282.     // 添加公章
  283.     addSeal(sealUrl, left, top, index) {
  284.       fabric.Image.fromURL(sealUrl, (oImg) => {
  285.         oImg.set({
  286.           left: left,
  287.           top: top,
  288.           // angle: 10,
  289.           scaleX: 0.8,
  290.           scaleY: 0.8,
  291.           index: index
  292.         });
  293.         // oImg.scale(0.5); //图片缩小一
  294.         this.canvasEle.add(oImg);
  295.       });
  296.     },
  297.     // 删除签章
  298.     removeSignature() {
  299.       this.canvasEle.remove(this.canvasEle.getActiveObject());
  300.     },
  301.     // 翻页展示盖章信息
  302.     commonSign(pageNum, isFirst = false) {
  303.       if (isFirst == false) this.canvasEle.remove(this.canvasEle.clear()); // 清空页面所有签章
  304.       let caches = JSON.parse(localStorage.getItem('signs')); // 获取缓存字符串后转换为对象
  305.       // console.log(caches);
  306.       if (caches == null) return false;
  307.       let datas = caches[this.pageNum];
  308.       if (datas != null && datas != undefined) {
  309.         for (let index in datas) {
  310.           this.addSeal(
  311.             datas[index].sealUrl,
  312.             datas[index].left,
  313.             datas[index].top,
  314.             datas[index].index
  315.           );
  316.         }
  317.       }
  318.     },
  319.     // 确认签章位置并保存到缓存
  320.     confirmSignature() {
  321.       let data = this.canvasEle.getObjects(); // 获取当前页面内的所有签章信息
  322.       let caches = JSON.parse(localStorage.getItem('signs')); // 获取缓存字符串后转换为对象
  323.  
  324.       let signDatas = {}; // 存储当前页的所有签章信息
  325.       let i = 0;
  326.       // let sealUrl = '';
  327.       for (var val of data) {
  328.         signDatas[i] = {
  329.           width: val.width,
  330.           height: val.height,
  331.           top: val.top,
  332.           left: val.left,
  333.           angle: val.angle,
  334.           translateX: val.translateX,
  335.           translateY: val.translateY,
  336.           scaleX: val.scaleX,
  337.           scaleY: val.scaleY,
  338.           pageNum: this.pageNum,
  339.           sealUrl: this.mainImagelist[val.index],
  340.           index: val.index
  341.         };
  342.         i++;
  343.       }
  344.       if (caches == null) {
  345.         caches = {};
  346.         caches[this.pageNum] = signDatas;
  347.       } else {
  348.         caches[this.pageNum] = signDatas;
  349.       }
  350.       localStorage.setItem('signs', JSON.stringify(caches)); // 对象转字符串后存储到缓存
  351.     },
  352.     // 提交数据
  353.     submitSignature() {
  354.       this.confirmSignature();
  355.       // let caches = localStorage.getItem('signs');
  356.       // console.log(JSON.parse(caches));
  357.       return false;
  358.     },
  359.     // 清空数据
  360.     clearSignature() {
  361.       this.canvasEle.remove(this.canvasEle.clear()); // 清空页面所有签章
  362.       localStorage.removeItem('signs'); // 清除缓存
  363.     },
  364.     end(e) {
  365.       this.addSeal(
  366.         this.mainImagelist[e.newDraggableIndex],
  367.         e.originalEvent.layerX,
  368.         e.originalEvent.layerY,
  369.         e.newDraggableIndex
  370.       );
  371.     },
  372.     // 设置PDF预览区域高度
  373.     setPdfArea() {
  374.       this.pdfUrl = './static/text.pdf';
  375.       // this.pdfurl = res.data.data.pdfurl;
  376.       this.$nextTick(() => {
  377.         this.showpdf(this.pdfUrl); // 接口返回的应该还有盖章信息，不只是pdf
  378.       });
  379.     }
  380.   },
  381.   watch: {
  382.     whDatas: {
  383.       handler() {
  384.         const loading = this.$loading({
  385.           lock: true,
  386.           text: 'Loading',
  387.           spinner: 'el-icon-loading',
  388.           background: 'rgba(0, 0, 0, 0.7)'
  389.         });
  390.         if (this.whDatas) {
  391.           // console.log(this.whDatas);
  392.           loading.close();
  393.           this.renderFabric();
  394.           this.canvasEvents();
  395.           let eleCanvas = document.querySelector('#ele-canvas');
  396.           eleCanvas.style = 'border:1px solid #5ea6ef;margin-top: 10px;';
  397.         }
  398.       }
  399.     },
  400.     pageNum: function () {
  401.       this.commonSign(this.pageNum);
  402.       this.queueRenderPage(this.pageNum);
  403.     }
  404.   }
  405. };
  406. </script>
  407. <style lang="scss" scoped>
  408. /*pdf部分*/
  409. #the-canvas {
  410.   margin-top: 10px;
  411. }
  412.  
  413. html:fullscreen {
  414.   background: white;
  415. }
  416. .elesign {
  417.   display: flex;
  418.   flex: 1;
  419.   flex-direction: column;
  420.   position: relative;
  421.   /* padding-left: 180px; */
  422.   margin: auto;
  423.   /* width:600px; */
  424. }
  425. .page {
  426.   text-align: center;
  427.   margin: 0 auto;
  428.   margin-top: 1%;
  429. }
  430. #ele-canvas {
  431.   /* border: 1px solid #5ea6ef; */
  432.   overflow: hidden;
  433. }
  434. .ele-control {
  435.   text-align: center;
  436.   margin-top: 3%;
  437. }
  438. #page-input {
  439.   width: 7%;
  440. }
  441.  
  442. @keyframes ani-demo-spin {
  443.   from {
  444.     transform: rotate(0deg);
  445.   }
  446.   50% {
  447.     transform: rotate(180deg);
  448.   }
  449.   to {
  450.     transform: rotate(360deg);
  451.   }
  452. }
  453. /* .loadingclass{
  454.     position: absolute;
  455.     top:30%;
  456.     left:49%;
  457.     z-index: 99;
  458. } */
  459. .left {
  460.   position: absolute;
  461.   top: 42px;
  462.   left: -5px;
  463.   padding: 5px 5px;
  464.   /*border: 1px solid #eee;*/
  465.   /*border-radius: 4px;*/
  466. }
  467. .left-title {
  468.   text-align: center;
  469.   padding-bottom: 10px;
  470.   border-bottom: 1px solid #eee;
  471. }
  472. li {
  473.   list-style-type: none;
  474.   padding: 10px;
  475. }
  476. .imgstyle {
  477.   vertical-align: middle;
  478.   width: 130px;
  479.   border: solid 1px #e8eef2;
  480.   background-image: url('~@/assets/img/projectCenter/tuo.png');
  481.   background-repeat: no-repeat;
  482. }
  483. .right {
  484.   position: absolute;
  485.   top: 7px;
  486.   right: -177px;
  487.   margin-top: 34px;
  488.   padding-top: 10px;
  489.   padding-bottom: 20px;
  490.   width: 152px;
  491.   /*border: 1px solid #eee;*/
  492.   /*border-radius: 4px;*/
  493. }
  494. .right-item {
  495.   margin-bottom: 15px;
  496.   margin-left: 10px;
  497. }
  498. .right-item-title {
  499.   color: #777;
  500.   height: 20px;
  501.   line-height: 20px;
  502.   font-size: 12px;
  503.   font-weight: 400;
  504.   text-align: left !important;
  505. }
  506. .detail-item-desc {
  507.   color: #333;
  508.   line-height: 20px;
  509.   width: 100%;
  510.   font-size: 12px;
  511.   display: inline-block;
  512.   text-align: left;
  513. }
  514. .btn-outline-dark {
  515.   color: #0f1531;
  516.   background-color: transparent;
  517.   background-image: none;
  518.   border: 1px solid #3e4b5b;
  519. }
  520.  
  521. .btn-outline-dark:hover {
  522.   color: #fff;
  523.   background-color: #3e4b5b;
  524.   border-color: #3e4b5b;
  525. }
  526. </style>

3. 优化后的代码 

  1. <!-- //?模块说明 =>  合同签章模块 addToTab-->
  2. <template>
  3.   <div class="contract-signature-view">
  4.     <div class="title-operation">
  5.       <h2 class="title">合同签章</h2>
  6.       <div class="operation">
  7.         <el-button type="danger" @click="removeSignature">删除签章</el-button>
  8.         <el-button type="danger" @click="clearSignature">清空签章</el-button>
  9.         <el-button type="primary" @click="submitSignature">提交签章</el-button>
  10.       </div>
  11.     </div>
  12.     <div class="section-box">
  13.       <!-- 签章图片 -->
  14.       <aside class="signature-img">
  15.         <div class="info">
  16.           <h3 class="name">印章</h3>
  17.           <p class="text">将示例印章标识拖到文件相应区域即可获取签章位置</p>
  18.         </div>
  19.         <!-- 拖拽 -->
  20.         <draggable
  21.           v-model="mainImagelist"
  22.           :group="{ name: 'itext', pull: 'clone' }"
  23.           :sort="false"
  24.           @end="end"
  25.         >
  26.           <transition-group type="transition">
  27.             <li
  28.               v-for="item in mainImagelist"
  29.               :key="item.img"
  30.               class="item"
  31.               style="text-align: center"
  32.             >
  33.               <img :src="item.img" width="100%;" height="100%" class="img" />
  34.             </li>
  35.           </transition-group>
  36.         </draggable>
  37.       </aside>
  38.       <!-- 主体区域 -->
  39.       <section class="main-layout" :class="{ 'is-first': isFirst }">
  40.         <!-- 操作 -->
  41.         <div class="operate-box">
  42.           <div class="slider-box">
  43.             <el-slider
  44.               class="slider"
  45.               v-model="scale"
  46.               :min="0.5"
  47.               :max="2"
  48.               :step="0.1"
  49.               :show-tooltip="false"
  50.               @change="sliderChange"
  51.             />
  52.             <span class="scale-value">{{ (scale * 100).toFixed(0) + '%' }}</span>
  53.           </div>
  54.           <div class="page-change">
  55.             <i class="icon el-icon-arrow-left" @click="prevPage" />
  56.             <!-- :min="1" -->
  57.             <el-input
  58.               class="input-box"
  59.               v-model.number="pageNum"
  60.               :max="defaultNumPages"
  61.               @change="cutover"
  62.             />
  63.             <span class="default-text">/{{ defaultNumPages }}</span>
  64.             <i class="icon el-icon-arrow-right" @click="nextPage" />
  65.           </div>
  66.         </div>
  67.         <!-- 画图 -->
  68.         <div class="out-view" :class="{ 'is-show': isShowPdf }">
  69.           <div class="canvas-layout" v-for="item in numPages" :key="item">
  70.             <!-- pdf部分 -->
  71.             <canvas class="the-canvas" />
  72.             <!-- 盖章部分 -->
  73.             <canvas class="ele-canvas"></canvas>
  74.           </div>
  75.         </div>
  76.         <i class="loading" v-loading="!isShowPdf" />
  77.       </section>
  78.       <!-- 位置信息 -->
  79.       <div class="position-info">
  80.         <h3 class="title">位置信息</h3>
  81.         <ul class="nav">
  82.           <li class="item" v-for="(item, index) in coordinateList" :key="index">
  83.             <span>{{ item.name }}</span>
  84.             <span>{{ item.page }}</span>
  85.             <span>{{ item.left }}</span>
  86.             <span>{{ item.top }}</span>
  87.           </li>
  88.         </ul>
  89.       </div>
  90.     </div>
  91.   </div>
  92. </template>
  93. <script>
  94. // 拖拽插件
  95. import draggable from 'vuedraggable';
  96. // pdf插件
  97. import { fabric } from 'fabric';
  98. import workerSrc from 'pdfjs-dist/es5/build/pdf.worker.entry';
  99. const pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');
  100. pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
  101.  
  102. export default {
  103.   components: { draggable },
  104.   data() {
  105.     return {
  106.       // pdf地址
  107.       pdfUrl: '',
  108.       // 左侧签章列表
  109.       mainImagelist: [],
  110.       // 右侧坐标数据
  111.       coordinateList: [{ name: '名称', page: '所在页面', left: 'x坐标', top: 'Y坐标' }],
  112.       // 总页数
  113.       numPages: 1,
  114.       defaultNumPages: 1,
  115.       // 当前页
  116.       pageNum: 1,
  117.       // 缩放比例
  118.       scale: 1,
  119.       // pdf是否显示
  120.       isFirst: true,
  121.       isShowPdf: false,
  122.       // pdf最外层的out-view
  123.       outViewDom: null,
  124.       // 各页pdf的canvas-layout
  125.       canvasLayoutTopList: [],
  126.       // 用来签章的canvas数组
  127.       canvasEle: [],
  128.       // 绘图区域的宽高
  129.       whDatas: null,
  130.       // pdf渲染的canvas数组
  131.       canvas: [],
  132.       // pdf渲染的canvas的ctx数组
  133.       ctx: [],
  134.       // pdf渲染的canvas的宽高
  135.       pdfDoc: null,
  136.       // 隐藏的input，用来提交数据
  137.       shadowInputValue: ''
  138.     };
  139.   },
  140.   created() {
  141.     this.mainImagelist = [
  142.       { name: '印章', img: require('@/assets/img/projectCenter/contract-sign-img.png') }
  143.       // { name: '印章', img: require('./sign.png') },
  144.       // { name: '红章', img: require('@/assets/img/projectCenter/seal.png') }
  145.     ];
  146.     this.setPdfArea();
  147.   },
  148.   mounted() {},
  149.   methods: {
  150.     /**
  151.      * pdf相关部分
  152.      */
  153.     // 设置PDF地址
  154.     setPdfArea() {
  155.       // // 1. 获取地址栏
  156.       // const urlString = window.location.href;
  157.       // // 2. 截取地址栏
  158.       // const pdfStr = urlString.split('?')[1];
  159.       // // 3. 截取pdf地址并解码
  160.       // this.pdfUrl = decodeURIComponent(pdfStr.split('=')[1]);
  161.  
  162.       this.pdfUrl = './static/text.pdf';
  163.       this.$nextTick(() => {
  164.         this.showpdf(this.pdfUrl); // 接口返回的应该还有盖章信息，不只是pdf
  165.       });
  166.     },
  167.     // 解析pdf
  168.     showpdf(pdfUrl) {
  169.       pdfjsLib
  170.         .getDocument({ url: pdfUrl, rangeChunkSize: 65536, disableAutoFetch: false })
  171.         .promise.then((pdfDoc_) => {
  172.           this.pdfDoc = pdfDoc_;
  173.           this.numPages = this.pdfDoc.numPages;
  174.           this.defaultNumPages = this.pdfDoc.numPages;
  175.           this.$nextTick(() => {
  176.             this.canvas = document.querySelectorAll('.the-canvas');
  177.             this.canvas.forEach((item) => {
  178.               this.ctx.push(item.getContext('2d'));
  179.             });
  180.             // 循环渲染pdf
  181.             for (let i = 1; i <= this.numPages; i++) {
  182.               this.renderPage(i).then(() => {
  183.                 this.renderPdf({
  184.                   width: this.canvas[i - 1].width,
  185.                   height: this.canvas[i - 1].height
  186.                 });
  187.               });
  188.             }
  189.             setTimeout(() => {
  190.               this.renderFabric();
  191.               this.canvasEvents();
  192.             }, 1000);
  193.           });
  194.         });
  195.     },
  196.     // 设置pdf宽高，缩放比例，渲染pdf
  197.     renderPage(num) {
  198.       // console.log('this.canvas', this.canvas[num], num);
  199.       return this.pdfDoc.getPage(num).then((page) => {
  200.         const viewport = page.getViewport({ scale: this.scale }); // 设置视口大小
  201.         this.canvas[num - 1].height = viewport.height;
  202.         this.canvas[num - 1].width = viewport.width;
  203.         // Render PDF page into canvas context
  204.         const renderContext = {
  205.           canvasContext: this.ctx[num - 1],
  206.           viewport: viewport
  207.         };
  208.         page.render(renderContext);
  209.       });
  210.     },
  211.     // 设置绘图区域宽高
  212.     renderPdf(data) {
  213.       this.whDatas = data;
  214.     },
  215.     // 生成绘图区域
  216.     renderFabric() {
  217.       // 1. 拿到全部的canvas-layout
  218.       const canvasLayoutDom = document.querySelectorAll('.canvas-layout');
  219.       // 2. 循环遍历
  220.       canvasLayoutDom.forEach((item) => {
  221.         this.canvasLayoutTopList.push({ obj: item, top: item.offsetTop });
  222.         // 3. 设置宽高和居中
  223.         item.style.width = this.whDatas.width + 'px';
  224.         item.style.height = this.whDatas.height + 'px';
  225.         item.style.margin = '0 auto 18px';
  226.         item.style.boxShadow = '4px 4px 4px #e9e9e9';
  227.  
  228.         // 4. 拿到盖章canvas
  229.         const canvasEle = item.querySelector('.ele-canvas');
  230.         // 5. 拿到pdf的canvas
  231.         const pCenter = item.querySelector('.the-canvas');
  232.         // 6. 设置盖章canvas的宽高
  233.         canvasEle.width = pCenter.clientWidth;
  234.         canvasEle.height = this.whDatas.height;
  235.         // 7. 创建fabric对象并存储
  236.         this.canvasEle.push(new fabric.Canvas(canvasEle));
  237.         // 8. 设置盖章canvas的样式
  238.         const container = item.querySelector('.canvas-container');
  239.         container.style.position = 'absolute';
  240.         container.style.left = '50%';
  241.         container.style.transform = 'translateX(-50%)';
  242.         container.style.top = '0px';
  243.       });
  244.  
  245.       // 现形
  246.       this.isFirst = false;
  247.       this.isShowPdf = true;
  248.       this.outViewDom = document.querySelector('.out-view');
  249.       // 开启监听窗口滚动
  250.       this.outViewScroll();
  251.     },
  252.     // 开启监听窗口滚动
  253.     outViewScroll() {
  254.       this.outViewDom.addEventListener('scroll', this.outViewRun);
  255.     },
  256.     // 关闭监听窗口滚动
  257.     outViewScrollClose() {
  258.       this.outViewDom.removeEventListener('scroll', this.outViewRun);
  259.     },
  260.     // 窗口滚动
  261.     outViewRun() {
  262.       const scrollTop = this.outViewDom.scrollTop;
  263.       const topList = this.canvasLayoutTopList.map((item) => item.top);
  264.       // 增加一个最大值
  265.       topList.push(Number.MAX_SAFE_INTEGER);
  266.       for (let index = 0; index < topList.length; index++) {
  267.         const element = topList[index];
  268.         if (element <= scrollTop && scrollTop < topList[index + 1]) {
  269.           this.pageNum = index + 1;
  270.           break;
  271.         }
  272.       }
  273.     },
  274.     // scale滑块,重新渲染整个pdf
  275.     sliderChange() {
  276.       this.pageNum = 1;
  277.       this.numPages = 0;
  278.       this.canvasLayoutTopList = [];
  279.       this.canvasEle = [];
  280.       this.ctx = [];
  281.       this.canvas = [];
  282.       this.isShowPdf = false;
  283.       // this.outViewScrollClose();
  284.       this.whDatas = null;
  285.       this.coordinateList = [{ name: '名称', page: '所在页面', left: 'x坐标', top: 'Y坐标' }];
  286.       this.getSignatureJson();
  287.       setTimeout(() => {
  288.         this.numPages = this.pdfDoc.numPages;
  289.         this.$nextTick(() => {
  290.           this.canvas = document.querySelectorAll('.the-canvas');
  291.           this.canvas.forEach((item) => {
  292.             this.ctx.push(item.getContext('2d'));
  293.           });
  294.           // 循环渲染pdf
  295.           for (let i = 1; i <= this.numPages; i++) {
  296.             this.renderPage(i).then(() => {
  297.               this.renderPdf({
  298.                 width: this.canvas[i - 1].width,
  299.                 height: this.canvas[i - 1].height
  300.               });
  301.             });
  302.           }
  303.           setTimeout(() => {
  304.             this.renderFabric();
  305.             this.canvasEvents();
  306.           }, 1000);
  307.         });
  308.       }, 1000);
  309.     },
  310.     /**
  311.      * 签章相关部分
  312.      */
  313.     // 签章拖拽边界处理，不能将图片拖拽到绘图区域外
  314.     canvasEvents() {
  315.       this.canvasEle.forEach((item) => {
  316.         item.on('object:moving', (e) => {
  317.           const obj = e.target;
  318.           // if object is too big ignore
  319.           if (obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width) {
  320.             return;
  321.           }
  322.           obj.setCoords();
  323.           // top-left  corner
  324.           if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
  325.             obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
  326.             obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
  327.           }
  328.           // bot-right corner
  329.           if (
  330.             obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height ||
  331.             obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width
  332.           ) {
  333.             obj.top = Math.min(
  334.               obj.top,
  335.               obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top
  336.             );
  337.             obj.left = Math.min(
  338.               obj.left,
  339.               obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left
  340.             );
  341.           }
  342.           // console.log('obj.cacheKey',obj.cacheKey);
  343.           const findIndex = this.coordinateList
  344.             .slice(1)
  345.             .findIndex((coord) => coord.cacheKey == obj.cacheKey);
  346.           const keys = ['width', 'height', 'top', 'left', 'angle', 'scaleX', 'scaleY'];
  347.           keys.forEach((item) => {
  348.             this.coordinateList[findIndex + 1][item] = Math.ceil(obj[item] / this.scale);
  349.           });
  350.           this.getSignatureJson();
  351.         });
  352.       });
  353.     },
  354.     // 拖拽结束
  355.     end(e) {
  356.       // 找到当前拖拽到哪一个canvas-layout上
  357.       const currentCanvasLayout = e.originalEvent.target.parentElement.parentElement;
  358.       const findIndex = this.canvasLayoutTopList.findIndex(
  359.         (item) => item.obj == currentCanvasLayout
  360.       );
  361.       if (findIndex == -1) return false;
  362.       // 取整
  363.       const left = e.originalEvent.layerX < 0 ? 0 : Math.ceil(e.originalEvent.layerX / this.scale);
  364.       const top = e.originalEvent.layerY < 0 ? 0 : Math.ceil(e.originalEvent.layerY / this.scale);
  365.       // console.log('e', e, findIndex);
  366.       this.addSeal({
  367.         sealUrl: this.mainImagelist[e.newDraggableIndex].img,
  368.         left,
  369.         top,
  370.         index: e.newDraggableIndex,
  371.         pageNum: findIndex
  372.       });
  373.     },
  374.     // 添加公章
  375.     addSeal({ sealUrl, left, top, index, pageNum }) {
  376.       fabric.Image.fromURL(sealUrl, (oImg) => {
  377.         oImg.set({
  378.           // 距离左边的距离
  379.           left: left,
  380.           // 距离顶部的距离
  381.           top: top,
  382.           // 角度
  383.           // angle: 10,
  384.           // 缩放比例，需要乘以scale
  385.           scaleX: 0.8 * this.scale,
  386.           scaleY: 0.8 * this.scale,
  387.           index,
  388.           // 禁止缩放
  389.           lockScalingX: true,
  390.           lockScalingY: true,
  391.           // 禁止旋转
  392.           lockRotation: true
  393.         });
  394.         this.canvasEle[pageNum].add(oImg);
  395.         // 保存签章信息
  396.         this.saveSignature({ pageNum, index, sealUrl });
  397.       });
  398.       // this.removeActive();
  399.     },
  400.     // 保存签章
  401.     saveSignature({ pageNum, index, sealUrl }) {
  402.       // 1. 拿到当前签章的信息
  403.       let length = 0;
  404.       let pageConfig = this.coordinateList.filter((item) => item.page - 1 == pageNum);
  405.       if (pageConfig) length = pageConfig.length;
  406.       const currentSignInfo = this.canvasEle[pageNum].getObjects()[length];
  407.       // 2. 拼接数据
  408.       const keys = ['width', 'height', 'top', 'left', 'angle', 'scaleX', 'scaleY'];
  409.       const obj = {};
  410.       keys.forEach((item) => {
  411.         obj[item] = Math.ceil(currentSignInfo[item] / this.scale);
  412.       });
  413.       obj.cacheKey = currentSignInfo.cacheKey;
  414.       obj.sealUrl = sealUrl;
  415.       obj.index = index;
  416.       obj.name = `${this.mainImagelist[index].name}${this.coordinateList.length}`;
  417.       obj.page = pageNum + 1;
  418.       this.coordinateList.push(obj);
  419.       this.getSignatureJson();
  420.     },
  421.     // 签章生成json字符串
  422.     getSignatureJson() {
  423.       // 1. 判断是否有签章
  424.       if (this.coordinateList.length <= 1) return (this.shadowInputValue = '');
  425.       // 2. 拿到签章的信息，去除第一条
  426.       const signatureList = this.coordinateList.slice(1);
  427.       // 3. 拼接数据，只要left和top和page
  428.       const keys = ['page', 'left', 'top'];
  429.       const arr = [];
  430.       signatureList.forEach((item) => {
  431.         const obj = {};
  432.         keys.forEach((key) => {
  433.           obj[key] = item[key];
  434.         });
  435.         arr.push(obj);
  436.       });
  437.       // 4. 转成json字符串
  438.       this.shadowInputValue = JSON.stringify(arr);
  439.     },
  440.     /**
  441.      * 操作相关部分
  442.      */
  443.     // 上一页
  444.     prevPage() {
  445.       if (this.pageNum <= 1) return;
  446.       this.pageNum--;
  447.       // 滚动到指定位置
  448.       this.outViewDom.scrollTop = this.canvasLayoutTopList[this.pageNum - 1].top;
  449.     },
  450.     // 下一页
  451.     nextPage() {
  452.       if (this.pageNum >= this.numPages) return;
  453.       this.pageNum++;
  454.       // 滚动到指定位置
  455.       this.outViewDom.scrollTop = this.canvasLayoutTopList[this.pageNum - 1].top;
  456.     },
  457.     // 切换页码
  458.     cutover() {
  459.       this.outViewScrollClose();
  460.       if (this.pageNum < 1) {
  461.         this.pageNum = 1;
  462.       } else if (this.pageNum > this.numPages) {
  463.         this.pageNum = this.numPages;
  464.       }
  465.       // 滚动到指定位置
  466.       this.outViewDom.scrollTop = this.canvasLayoutTopList[this.pageNum - 1].top;
  467.       setTimeout(() => {
  468.         this.outViewScroll();
  469.       }, 500);
  470.     },
  471.     // 删除所有的签章选中状态
  472.     removeActive() {
  473.       this.canvasEle.forEach((item) => {
  474.         item.discardActiveObject().renderAll();
  475.       });
  476.     },
  477.     // 删除签章
  478.     removeSignature() {
  479.       // 1. 判断是否有选中的签章
  480.       const findItem = this.canvasEle.filter((item) => item.getActiveObject());
  481.       // 2. 判断选中签章的个数
  482.       if (findItem.length == 0) return this.$message.error('请选择要删除的签章');
  483.       // 3. 判断选中签章的个数是否大于1
  484.       if (findItem.length > 1) {
  485.         this.removeActive();
  486.         return this.$message.error('只能选择删除一个签章,请重新选择');
  487.       }
  488.       // 4. 拿到选中的签章的cacheKey
  489.       const activeObj = findItem[0].getActiveObject();
  490.       const findIndex = this.coordinateList.findIndex(
  491.         (item) => item.cacheKey == activeObj.cacheKey
  492.       );
  493.       // 5. 删除选中的签章
  494.       findItem[0].remove(activeObj);
  495.       // 6. 删除选中的签章的信息
  496.       this.coordinateList.splice(findIndex, 1);
  497.       this.getSignatureJson();
  498.     },
  499.     // 清空签章
  500.     clearSignature() {
  501.       this.canvasEle.forEach((item) => {
  502.         item.clear();
  503.       });
  504.       this.coordinateList = [{ name: '名称', page: '所在页面', left: 'x坐标', top: 'Y坐标' }];
  505.       this.getSignatureJson();
  506.     },
  507.     // 提交数据
  508.     submitSignature() {
  509.       console.log('this.coordinateList', this.coordinateList);
  510.     }
  511.   }
  512. };
  513. </script>
  514. <style lang="scss" scoped>
  515. .contract-signature-view {
  516.   /*pdf部分*/
  517.   .ele-canvas {
  518.     overflow: hidden;
  519.   }
  520.   .title-operation {
  521.     height: 80px;
  522.     padding: 20px 40px;
  523.     display: flex;
  524.     align-items: center;
  525.     justify-content: space-between;
  526.     .title {
  527.       font-size: 20px;
  528.       font-weight: 600;
  529.     }
  530.     border-bottom: 1px solid #e4e4e4;
  531.   }
  532.   .section-box {
  533.     position: relative;
  534.     display: flex;
  535.     height: calc(100vh - 60px);
  536.  
  537.     .signature-img {
  538.       width: 240px;
  539.       min-width: 240px;
  540.       background-color: #fff;
  541.       padding: 40px 15px;
  542.  
  543.       border-right: 1px solid #e4e4e4;
  544.       .info {
  545.         margin-bottom: 38px;
  546.         .name {
  547.           font-size: 18px;
  548.           font-weight: 600;
  549.           color: #000000;
  550.           line-height: 25px;
  551.           margin-bottom: 20px;
  552.         }
  553.         .text {
  554.           font-size: 14px;
  555.           color: #000000;
  556.           line-height: 20px;
  557.         }
  558.       }
  559.       .item {
  560.         padding: 10px;
  561.         border: 1px dashed rgba(0, 0, 0, 0.3);
  562.         &:not(:last-child) {
  563.           margin-bottom: 10px;
  564.         }
  565.         .img {
  566.           vertical-align: middle;
  567.           width: 120px;
  568.           background-repeat: no-repeat;
  569.         }
  570.       }
  571.     }
  572.     .main-layout {
  573.       flex: 1;
  574.       background-color: #f7f8fa;
  575.       position: relative;
  576.  
  577.       &.is-first {
  578.         .operate-box {
  579.           opacity: 0;
  580.         }
  581.       }
  582.       .operate-box {
  583.         opacity: 1;
  584.         position: absolute;
  585.         top: 0;
  586.         left: 0;
  587.         width: 100%;
  588.         height: 40px;
  589.         background-color: #fff;
  590.         border-bottom: 1px solid #e4e4e4;
  591.         display: flex;
  592.         justify-content: center;
  593.         align-items: center;
  594.         .slider-box {
  595.           width: 230px;
  596.           display: flex;
  597.           justify-content: center;
  598.           align-items: center;
  599.           border-left: 1px solid #e4e4e4;
  600.           border-right: 1px solid #e4e4e4;
  601.           .slider {
  602.             width: 120px;
  603.           }
  604.           .scale-value {
  605.             margin-left: 24px;
  606.             font-size: 16px;
  607.             color: #000000;
  608.             line-height: 22px;
  609.           }
  610.         }
  611.         .page-change {
  612.           display: flex;
  613.           align-items: center;
  614.           margin-left: 30px;
  615.           .icon {
  616.             cursor: pointer;
  617.             padding: 0 5px;
  618.             color: #c1c1c1;
  619.           }
  620.           .input-box {
  621.             border: none;
  622.             /deep/ .el-input__inner {
  623.               width: 34px;
  624.               height: 20px;
  625.               border: none;
  626.               padding: 0;
  627.               text-align: center;
  628.               border-bottom: 1px solid #e4e4e4;
  629.             }
  630.           }
  631.           .default-text {
  632.             display: flex;
  633.             line-height: 22px;
  634.             margin-right: 5px;
  635.           }
  636.         }
  637.       }
  638.       .out-view {
  639.         height: calc(100vh - 100px);
  640.         margin: 40px auto;
  641.         overflow-x: auto;
  642.         overflow-y: auto;
  643.         padding-top: 20px;
  644.         text-align: center;
  645.         opacity: 0;
  646.         transition: all 0.5s;
  647.         &.is-show {
  648.           opacity: 1;
  649.         }
  650.         .canvas-layout {
  651.           position: relative;
  652.           text-align: center;
  653.           margin: 0 auto 18px;
  654.         }
  655.       }
  656.       .loading {
  657.         width: 20px;
  658.         height: 20px;
  659.         position: absolute;
  660.         top: 50%;
  661.         left: 50%;
  662.         transform: translate(-50%, -50%);
  663.         z-index: 999;
  664.         /deep/ .el-loading-mask {
  665.           background-color: transparent;
  666.         }
  667.       }
  668.     }
  669.     .position-info {
  670.       width: 355px;
  671.       min-width: 355px;
  672.       border-left: 1px solid #e4e4e4;
  673.       background-color: #fff;
  674.       padding: 14px 15px;
  675.       .title {
  676.         font-size: 14px;
  677.         font-weight: 400;
  678.         color: #000000;
  679.         line-height: 20px;
  680.         padding-bottom: 18px;
  681.       }
  682.       .nav {
  683.         display: flex;
  684.         flex-direction: column;
  685.         .item {
  686.           display: flex;
  687.           justify-content: space-between;
  688.           padding: 10px 0;
  689.           border-bottom: 1px solid #eee;
  690.           &:first-child {
  691.             background-color: #f7f8fa;
  692.           }
  693.           span {
  694.             flex: 1;
  695.             text-align: center;
  696.             font-size: 12px;
  697.             color: #000000;
  698.             line-height: 20px;
  699.           }
  700.         }
  701.       }
  702.     }
  703.   }
  704. }
  705. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/880274
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号