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

<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

  • 30
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue实现PDF文件下载非常简单,只需要通过Vue的axios库向后端发送请求获取二进制PDF文件的数据流,然后将其转换为Blob对象,并使用URL.createObjectURL()将其转换为可下载的URL,接着再使用a标签的download属性实现下载即可。 具体实现如下: 1.安装axios库 npm install axios --save 2.在Vue组件中引入axios和FileSaver库 import axios from 'axios'; import FileSaver from 'file-saver'; 3.在Vue组件方法中实现PDF文件下载 downloadFile() { axios.get('http://localhost:8080/api/download/pdf', { responseType: 'arraybuffer' }) .then(response => { const blob = new Blob([response.data], { type: 'application/pdf' }); const fileName = 'test.pdf'; FileSaver.saveAs(blob, fileName); }) .catch(error => { console.error('Error downloading PDF file', error); }); } 4.在后端实现返回二进制PDF文件的接口 @RequestMapping(value = "/download/pdf", method = RequestMethod.GET) @ResponseBody public ResponseEntity<byte[]> downloadPDF() throws IOException { File file = new File("test.pdf"); byte[] bytes = FileUtils.readFileToByteArray(file); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", "test.pdf"); headers.setContentLength(bytes.length); return new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK); } 以上是Vue实现PDF文件下载的简单示例,可以通过修改接口地址和文件名来适应不同的场景。同时,需要注意的是该方法需要在前端启动了服务器的情况下才能正常使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱编程的小学究

愿你有所收获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值