vue实现上传pdf文件盖章与签名，盖章文件下载

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> 标签进行调用。

我们使用了 标签来调用 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

        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