Vue向pdf文件中添加二维码

🚀 场景一:利用vue向pdf文件中写入二维码图片或其他图片

🚀 场景二:向pdf中添加水印
思路:

1、先通过url链接生成二维码,二维码存在于dom中

2、使用html2canvas库将二维码的dom转为一个canvas对象

3、根据canvas对象获取blob中的buffer

4、最后将这个二维码以图片的形式嵌入到pdf文件流中

安装依赖

php 复制代码
npm i html2canvas
npm i qrcodejs2-fixes
npm i pdf-lib

引入

php 复制代码
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2-fixes'
import { degrees, PDFDocument } from 'pdf-lib'

封装

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

src/utils/qrToPdf.js

php 复制代码
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;
  // href 就是生成的pdf地址,可以拿到href做不通操作,下载预览等等
  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)
}

引入调用使用的时候:

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

案例(Vue3)

vue2大致写法都一样

php 复制代码
<template>
  <div class="main">
    <input id="fileInp" type="file">
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import previewEmbedQrcodeToPdf from '@/utils/qrToPdf'
 
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>

合成预览图

此博客主要参考:https://blog.csdn.net/m0_51431448/article/details/131216664

Vue向Pdf添加水印:https://blog.csdn.net/m0_51431448/article/details/129539428?spm=1001.2014.3001.5501

相关推荐
....49241 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
hello_simon2 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
ZhangChuChu_92488 小时前
Word在生成PDF后,PDF左侧导航书签目录错误显示的解决方法
pdf·word
岁月如歌,青春不败11 小时前
MaxEnt模型全解析:从原理到 R 语言实战,开启生态环境研究新视野
arcgis·r语言·生态学·论文写作·生态系统服务·物种分布·maxent模型
清风ai明月13 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿13 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
剑亦未配妥13 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
zoahxmy092913 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon1111313 小时前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试