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 小时前
基于python写的PDF表格提取到excel文档
python·pdf·excel·pdf文档表格转excel
chenchihwen13 小时前
深度解析RAG系统中的PDF解析模块:Docling集成与并行处理实践
python·算法·pdf
Uluoyu14 小时前
word、pdf文档内容提取工具类
java·pdf·word
sanshizhang15 小时前
word文档转pdf开源免费,可自定义水印
pdf·开源·word
念你那丝微笑17 小时前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf
我命由我1234519 小时前
PDFBox - PDDocument 与 byte 数组、PDF 加密
java·服务器·前端·后端·学习·java-ee·pdf
南飞测绘视界19 小时前
【编号220】中国国内生产总值历史数据汇编1952-2021合订本(PDF扫描版)
汇编·pdf·年鉴
悠悠:)21 小时前
puppeteer 生成pdf,含动态目录,目录带页码
pdf
UpYoung!2 天前
无广技术贴!【PDF编辑器】Solid Converter PDF保姆级图文下载安装指南——实用推荐之PDF编辑软件
学习·数学建模·pdf·编辑器·运维开发·个人开发
Uluoyu2 天前
支持Word (doc/docx) 和 PDF 转成一张垂直拼接的长PNG图片工具类
java·pdf·word