将 html 转成 PDF 的方式有很多种，对于前端开发来说常用的是使用 html2canvas + jspdf，原理是先将 html 页面转化成 canvas 图片，再通过 jspdf 转成 pdf 图片，这种方式有很多的不足主要有以下几点：

• 清晰度低：由于是将 HTML 内容转换为图像，图像质量和文字清晰度可能不如直接生成的 PDF
• 性能差：对于较大的页面生成和渲染时间可能会较慢
• 安全性低：对于此种方式只能在客户端进行转化，客户端环境多样经常会有广告注入导致生成的 pdf 带有广告

当需要避开以上几个缺点时就需要考虑是否有其他的方式，本文就来介绍下使用 nodejs+puppeteer 来生成 PDF 的方式

实现

对于 puppeteer 铺怕特使用 HTML 生成 PDF 文件主要有两种方式，一种是通过浏览器打开网站地址，另一种是传输 html 字符串，下面介绍下两种方式的实现

• 通过设置 HTML 字符串来生成 PDF 文件，主要流程如下:

  • browser.newPage()打开空白页面
  • page.setContent 设置页面内容
  • 设置生产 PDF 文件的路径
  • page.pdf 生成 pdf 文件

• 通过在服务打开浏览器进入需要转换的页面来生成，主要流程如下:

  • browser.newPage()打开空白页面
  • page.goto 进入需要生成 pdf 的网站
  • 设置生产 PDF 文件的路径
  • page.pdf 生成 pdf 文件

const puppeteer = require("puppeteer");
const fs = require('fs');

//生成PDF文件
const generatPDFFile = async (page, str) => {
  const path = `${Date.now()}.pdf`;
  if(str){
    console.log('--------- page set content --------');
    await page.setContent(str,{ waitUntil: 'networkidle0'});
  }
  await page.pdf({ path, format: "A4" });
};

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: ["--no-sandbox"],
  });
  const page = await browser.newPage();
  //通过HTML字符串生成
  const htmlStr = fs.readFileSync('./demo.html').toString();
  await generatPDFFile(page,htmlStr);

  //通过页面生成
  await page.goto("https://www.baidu.com");
  await generatPDFFile(page);

  await browser.close();
})();

总结

对于功能的实现往往都有多种方式，每种方式都有各自的优缺点，使用哪种方式取决于该功能服务的对象。在实际业务中选择用puppeteer来生成PDF一般是因为用户对于网页内容的准确性要求非常，由于客户端的网络环境和设备的多样性和复杂性，相应的对客户端生成pdf的准确性也是无法保证。因此使用服务端nodejs+puppeteer生成PDF是我们最优的选择。