经验分享

为什么要将转换

众所周知，HTML是一种非常重量级的超文本标记语言，包罗万象，容纳一切。但是对于非计算机相关人员很少用到。多数人写报告或者论文之类的东西的选择更多的是word，或者WPS。然后可能会转成pdf，因为pdf可以在浏览器中打开。
在浏览器中按Ctrl + P可以直接把当前的网页转换成html，但是这是有损的转换。在新的pdf中，整张网页都会变成一张图片，所有文字都不能再复制，所有的链接也会失效。
有时候我们为了向某些网站提交文档，辛辛苦苦写出来一张漂亮的html，但是别人不接收，如果直接用浏览器转成html，又会丧失原本的一些功能。这时候就要考虑如何将html转成pdf。

方法

这里提供一种基于Node.js里puppeteer包的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('file:///xxx.html');
  await page.pdf({path: 'xxx.pdf', format: 'A4'});

  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio,
    };
  });

  console.log('Dimensions:', dimensions);

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

代码中的file:///xxx.html这部分代表了目标的网页，可以是一个http链接，也可以是本地的文件。要注意的是，如果是本地文件，不要在文件夹资源管理器中复制路径，把它在浏览器中打开，再复制浏览器中的路径。
path: 'xxx.pdf', format: 'A4'这部分代表了生成pdf的文件路径和纸张大小。

用这种方法转换出的html可以保留文字复制，还可以保留链接，但是有些元素不能保留。建议是不能保留的元素直接在html中用长得一样的图片代替原本元素的位置。