html转pdf的三种方式,pdf-lib合并pdf

项目中遇到需要xml打印pdf的功能，通过查找资料找到三种方式处理

• html转图片
• 使用浏览器的打印功能 window.print
• 使用无头浏览器（底部有github地址，欢迎star）

1.把html转成图片塞到pdf中，使用jspdf和html2Canvas两个插件

安装

npm i jspdf -S
npm i html2Canvas -S

使用方式就是使用html2Canvas把dom转成图片，然后通过截图的方式把图片添加到pdf中

const canvas = await html2Canvas(dom, {
  allowTaint: false,
  taintTest: false,
  logging: false,
  useCORS: true,
  dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
  scale: 4 // 按比例增加分辨率
})
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const a4w = 277
const a4h = 190
const alias = `myImage${i + 1}`
console.log(alias);
// 此处示例，参数3和4可以处理图片的开始位置的xy
pdf.addImage(pageData, 'JPEG', 10, 10, a4w, a4h, alias)
// 多页需要添加新的page
pdf.addPage()

2.使用window.print()转pdf

网上使用有各种插件，print.js,vue-print，可以自行查找资料，我使用的是原生打印
我使用了两种方式，一种直接获取dom的innerHTML复制给body,使用css样式做分页处理，由于我加载的固定的xml，直接固定宽高，使用css标记处理打印分页

page-break-after: always;
@media print {
  @page {
    size: auto;
    margin: 0;
  }
  .drawio-item {
    margin: 0;
  }
  // 设置打印时的缩放，由于使用的a4大小比例问题，1169*827，实际 794*1123，做了一个缩放处理
  .print-page {
    zoom: calc(794/827);
  }
// js
document.body.id = 'print-html'
// 使用框架影响到打印分页样式，所以做了一个特殊处理
document.body.innerHTML = this.$refs.contentRef.innerHTML
window.print()
location.reload()

上面这种方式处理会刷新页面对用户不友好，后面查找到iframe的方式，实现原理一样

document.body.id = 'print-html'
  const iframe = document.createElement("iframe");
  document.body.appendChild(iframe)
  
  iframe.setAttribute(
    "style",
    "position:fixed;width:100%;height:100%;left:0;top:0;z-index: 100;"
  );
  const head = document.createElement('head')
  const style = document.createElement('style')
  style.innerHTML = `
  .print-page {
    zoom: calc(${794/827});
    page-break-after: always;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  * {
    margin: 0;
    padding: 0;
  }
  @media print {
    @page {
      size: auto;
      margin: 0;
    }
  }`
  head.appendChild(style)
  iframe.contentDocument.write(head.innerHTML)
  iframe.contentDocument.write(this.$refs.contentRef.innerHTML);
  iframe.contentDocument.close();
  // 加载完成
  iframe.onload = function() {
   iframe.contentWindow.print();
   document.body.removeChild(iframe)
 }

2024/1/4更新

3.无头浏览器需要再node环境上运行，puppeteer
puppeteer中文文档

const puppeteer = require('puppeteer')
async function printPDF() {
  const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] })
  const page = await browser.newPage()
  // 示例使用百度网站，实际需要对应的静态页面做特殊处理转pdf的内容
  await page.goto('https://www.baidu.com/')
  const file = await page.pdf({ format: 'A4'})
  await browser.close()
  return file
}
// 拿到文件通过接口传递给前端
const file = printPDF()

2024/2/8更新

补充puppeteer转pdf,合并分页逻辑，合并pdf
使用pdf-lib做pdf的合并，每一页单独加载转换pdf

核心逻辑：在需要打印pdf的页面，把加载好的html的文本传递给node后台，使用puppeteer的setContent加载完成后转pdf然后再把文件流返回给前台

github样例地址 可以直接本地运行

const { PDFDocument } = require('pdf-lib')
// htmls是html片段，在无头浏览器里面加载完成转换pdf
const { landscape, format, htmls } = data
function generatePdf(data) {
  	const pdfDoc = await PDFDocument.create()
	for (let i = 0; i < htmls.length; i++) {
	  const page = await browser.newPage()
	  await page.setContent(htmls[i], {waitUntil: 'networkidle0'})
	  console.log(i, 'i');
	  const fileBufer = await page.pdf({ format, landscape })
	  const coverDoc = await PDFDocument.load(fileBufer)
	  const [coverPage] = await pdfDoc.copyPages(coverDoc, [0])
	  pdfDoc.addPage(coverPage)
	  // const fileName = `${__dirname}/ceshi${i}.pdf`
	  // fileList.push(fileName)
	  // PDFMergeJs.add(fileName)
	}
	// 获取文件流返回给前端
	const pdfBytes = await pdfDoc.save()
	const pdf_path = 'merged.pdf'
	// // console.log(pdfBytes);
	await writeFile(pdf_path, pdfBytes);
}