vue2使用pdfjs-dist和jsPDF生成pdf文件

vue2使用pdfjs-dist和jsPDF生成pdf文件

1、安装依赖

powershell 复制代码
npm install pdfjs-dist@2.6.347

2、引入依赖

javascript 复制代码
import { jsPDF } from 'jspdf'
javascript 复制代码
// 使用require方式导入pdfjs-dist v2.5.207,高版本报错(import导入会报错:GlobalWorkerOptions undefined)
this.pdfjsLib = require('pdfjs-dist/build/pdf')
this.pdfjsLib.GlobalWorkerOptions.workerSrc = './pdf.worker.js'// 将pdfjs-dist/build/pdf.worker.js文件复制到public下

3、使用

javascript 复制代码
/**
 * 使用pdfjs-dist将每一页pdf转为图片(canvas->图片数据url)
 * 使用jspdf将图片合并为新的pdf(pdf-lib不支持图片直接转为pdf页面)
 */
const pdfDoc = await this.pdfjsLib.getDocument(pdfBytes).promise
const outputPdf = new jsPDF(true)
let i = 1
for (i = 1; i <= pdfDoc.numPages; i++) {
  const page = await pdfDoc.getPage(i)

  const viewport = page.getViewport({ scale: 1.9 })
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  canvas.width = viewport.width
  canvas.height = viewport.height

  // Render PDF page into canvas
  await page.render({ canvasContext: context, viewport }).promise

  // Add canvas as image to PDF
  const imgData = canvas.toDataURL('image/png')
  if (i > 1) {
    outputPdf.addPage()
  }
  outputPdf.addImage(imgData, 'PNG', 0, 0, 210, 297, undefined, 'FAST') // A4 size

  canvas.remove() // Clean up
}

// Save the new PDF
const pdfblob = outputPdf.output('blob')
const url = window.URL.createObjectURL(pdfblob)

// 下载到本地
// const url = window.URL.createObjectURL(new Blob([mergedPdfFile.buffer]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'test.pdf')
document.body.appendChild(link)
link.click()

4、注意

1)pdfjs-dist安装低版本,高版本报错

2)如需压缩图片

new jsPDF(true)

outputPdf.addImage(imgData, 'PNG', 0, 0, 210, 297, undefined, 'FAST')

3)如果将多个图像添加到一个文档中,请使用

javascript 复制代码
outputPdf.addImage(imgData, 'PNG', 0, 0, 210, 297, undefined, 'FAST')

而不是

javascript 复制代码
outputPdf.addImage(imgData, 'PNG', 0, 0, 210, 297, '', 'FAST')

否则第一张图片将替换所有其他图片

相关推荐
pc大老1 天前
PDF文件翻译新方法:轻松多语言转换!
pdf·pdf文件·#pdf设置·pdf转换多国语言
SEO-狼术2 天前
Use Sticky Notes for Easier PDF Collaboration
pdf
私人珍藏库4 天前
[Windows] PDF 专业电子签章工具 v3.3
windows·pdf
广都--编程每日问4 天前
deepseek 的对话json导出成word和pdf
pdf·json·word·deepseek·exprot
livingbody5 天前
【2025年9月版 亲测可用】《人民日报》PDF文件下载
开发语言·爬虫·python·pdf
私人珍藏库5 天前
[Windows] 发票识别工具。支持xml、pdf、ofd文件
xml·pdf
超人在良家-阿启5 天前
PDF中表格的处理 (OCR)
pdf·ocr
reasonsummer5 天前
【办公类-115-01】20250920职称资料上传01——多个jpg转同名PDF(如:荣誉证书)并自动生成单一文件夹
pdf
孤客网络科技工作室6 天前
Python - 100天从新手到大师:第二十七天Python操作PDF文件
开发语言·python·pdf
Bella_chene7 天前
Excel转PDF不分页
pdf·excel