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

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

相关推荐
Light6013 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路14 小时前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
东风西巷1 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Sunny_yiyi2 天前
Java根据模版导出PDF文件
java·开发语言·pdf
小*-^-*九2 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册2 天前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_172805592 天前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf
E_ICEBLUE2 天前
如何使用 OCR 提取扫描件 PDF 的文本(Python 实现)
java·数据库·pdf
AnySpaceOne3 天前
PDF转Word在线转换教程:多种实用方法分享
学习·pdf·word
勘察加熊人3 天前
python将pdf转txt,并切割ai
数据库·python·pdf