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')

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

相关推荐
小*-^-*九12 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册16 小时前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_1728055919 小时前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf
E_ICEBLUE1 天前
如何使用 OCR 提取扫描件 PDF 的文本(Python 实现)
java·数据库·pdf
AnySpaceOne1 天前
PDF转Word在线转换教程:多种实用方法分享
学习·pdf·word
勘察加熊人2 天前
python将pdf转txt,并切割ai
数据库·python·pdf
@小匠2 天前
iText与OpenPDF使用差异及中文处理完全指南
java·pdf
ks胤墨2 天前
Stirling PDF与cpolar:居家办公的云端PDF处理解决方案
pdf
sc_yhsheng2 天前
18j621-3通风天窗图集pdf(免费高清版)
windows·pdf
不勤奋不做蜗牛2 天前
常用PDF转换工具推荐
pdf