Vue实现向PDF文件中添加二维码

 更新时间:2023年06月15日 08:54:21   作者:会说法语的猪  
这篇文章主要为大家详细介绍了如何利用Vue实现向PDF文件中添加二维码的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

前言

这两天刚看到一个需求,简单描述一下,就是我们拿到一个pdf文件流(文件流可以是后端返回的,也可以是从自己本地选的)和一个url链接 ,现在要将url链接生成二维码,并将这个二维码添加到这个pdf文件中,然后再预览或者下载这个pdf文件。

灵感出自于我之前写过一篇Vue使用pdf-lib为文件流添加水印并预览,上篇写的是在pdf上加水印,其中一种方式就是通过图片的方式添加上去的,所以这次添加二维码基本差不多一个意思,我们可以先通过url链接生成一个二维码,这个二维码其实是个dom元素的,我们使用html2canvas库可以将二维码这个dom转为一个canvas对象,有了canvas是不是可以获取到Blob对象了?有了blob就可以获取到buffer了,那我们就可以将这个二维码以图片的形式嵌入到pdf文件流中。

共用到三个库分别是:html2canvas 、qrcodejs2-fixes、pdf-lib。

注意这里生成二维码共有两个库,一个是qrcodejs2,这个由于兼容性问题只支持vue2,我这里的例子是用vue3来演示的,所以就是用第二个:qrcodejs2-fixes,这个使用跟qrcodejs2一样,区别就是一个适用vue2一个vue3

安装

pnpm add html2canvas
pnpm add qrcodejs2-fixes
pnpm add pdf-lib

引入

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2-fixes'
import { degrees, PDFDocument } from 'pdf-lib'

封装

这里单独封装一个方法,用的时候直接调用该方法,将pdf文件流(blob对象)和二维码url链接地址传入进去 就可以,我这里就以window打开一个新页签预览处理之后的pdf为例了,真实项目也可能是下载,都是差不多的,下载也很简单,通过a标签,window.URL.createObjectURL转为一个路径,然后给a标签增加download属性,值为文件名称,click即下载了。这里就没以下载为例 

src/hooks/EmbedQrcodeToPdf.js

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2-fixes'
import { degrees, PDFDocument } from 'pdf-lib'
 
export default function ({ pdfBlob, qrcodeUrl = 'https://www.baidu.com/' }) {
  if(!pdfBlob) return
  pdfBlob.arrayBuffer().then(async buffer => {
    const pdfDoc = await PDFDocument.load(buffer)
    const qrcodeDom = document.createElement('div')
    qrcodeDom.id = 'wft-qrcode'
    document.body.appendChild(qrcodeDom)
    new QRCode(document.getElementById('wft-qrcode'), {
      text: qrcodeUrl,
      width: '128',
      height: '128',
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H,
    })
    html2canvas(document.getElementById('wft-qrcode')).then(canvas => {
      canvas.toBlob(qrcodeBlob => {
        qrcodeBlob.arrayBuffer().then(async qrcodeBuffer => {
          const image = await pdfDoc.embedPng(qrcodeBuffer)
          const dims = image.scale(0.6)
          const pages = pdfDoc.getPages()
          for (let i = 0; i < pages.length; i++) {
            let page = pages[i]
            const { width, height } = page.getSize()
            page.drawImage(image, {
              x: width - 100, // 距离右侧100
              y: height - 100, // 距离上侧100  就是右上角
              width: dims.width,
              height: dims.height,
              rotate: degrees(0)
            })
          }
          const pdfBytes = await pdfDoc.save()
          preView(pdfBytes)
          document.body.removeChild(qrcodeDom)
        })
      }, 'image/png')
    })
  })
}
 
// 打开新页签预览
function preView(stream, docTitle = '测试PDF') {
  const URL = window.URL || window.webkitURL;
  const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' }))
  const wo = window.open(href)
  // 设置新打开的页签 document title
  let timer = setInterval(() => {
    if (wo.closed) {
      clearInterval(timer)
    } else {
      wo.document.title = docTitle
    }
  }, 500)
}

封装的方法中的二维码样式啥的,我也懒得动态设置参数传入了,大家有需要在封装的方法中按需修改即可

引入调用使用的时候: 

previewEmbedQrcodeToPdf({
  pdfBlob: file, // 你的文件流
  qrcodeUrl: 'xxxx' // 你的生成二维码的url链接
})

使用案例代码(V3)

<template>
  <div class="main">
    <input id="fileInp" type="file">
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import previewEmbedQrcodeToPdf from '../hooks/EmbedQrcodeToPdf'
let cusInp = null
onMounted(() => {
  cusInp = document.getElementById('fileInp')
  cusInp.addEventListener('input', inpHander)
})
onUnmounted(() => {
  cusInp.removeEventListener('input', inpHander)
})
function inpHander(event) {
  const file = event.target.files[0]
  if(!file) return
  previewEmbedQrcodeToPdf({
    pdfBlob: file
  })
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>

demo效果

右上角这个二维码就是我们生成的,添加到这个pdf中的,我这里是以baidu的链接为例的,所以扫出来也是百度的链接

到此这篇关于Vue实现向PDF文件中添加二维码的文章就介绍到这了,更多相关Vue PDF添加二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2.0 keep-alive最佳实践

    vue2.0 keep-alive最佳实践

    这篇文章主要为大家详细介绍了vue2.0 keep-alive的最佳实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue使用Element的Tree树形控件实现拖动改变节点顺序方式

    vue使用Element的Tree树形控件实现拖动改变节点顺序方式

    这篇文章主要介绍了vue使用Element的Tree树形控件实现拖动改变节点顺序方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue使用echarts实现柱状图动态排序效果

    vue使用echarts实现柱状图动态排序效果

    echarts在前端开发中实属必不可缺的大数据可视化工具,这篇文章主要为大家详细介绍了vue如何使用echarts实现柱状图动态排序效果,感兴趣的可以了解下
    2023-10-10
  • 详解Vue.js中.native修饰符

    详解Vue.js中.native修饰符

    这篇文章主要介绍了Vue.js中.native修饰符,给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。需要的朋友可以参考下
    2018-04-04
  • Vue传递参数不在URL路径拼接显示问题

    Vue传递参数不在URL路径拼接显示问题

    这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue+Ant Design进度条滑块与input联动效果实现

    vue+Ant Design进度条滑块与input联动效果实现

    最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100,怎么实现这个联动效果呢,下面小编给大家分享下基于vue+Ant Design进度条滑块与input联动效果的实现,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • 解决vuex改变了state的值,但是页面没有更新的问题

    解决vuex改变了state的值,但是页面没有更新的问题

    这篇文章主要介绍了解决vuex改变了state的值,但是页面没有更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目如何实现Echarts在label中获取点击事件

    vue项目如何实现Echarts在label中获取点击事件

    这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue弹出菜单功能的实现代码

    Vue弹出菜单功能的实现代码

    这篇文章主要介绍了Vue左侧底部弹出菜单功能的实现代码,需要的朋友可以参考下
    2018-09-09
  • electron-builder打包vue2项目问题总结

    electron-builder打包vue2项目问题总结

    这篇文章主要介绍了electron-builder打包vue2项目问题总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08

最新评论