HTML转成PDF的4个方法介绍（附代码）

它本质上是一个可以从 Node.js 运行的浏览器。如果你读过它的文档，其中首先提到的就是你可以用 Puppeteer 来生成页面的截图和PDF。优秀！这正是我们想要的。

先用 npmi i puppeteer 安装 Puppeteer，并实现我们的功能。

const puppeteer = require('puppeteer')
 
async function printPDF() {
 const browser = await puppeteer.launch({ headless: true });
 const page = await browser.newPage();
 await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
 const pdf = await page.pdf({ format: 'A4' });
 
 await browser.close();
 return pdf
})

这是一个简单的功能，可导航到 URL 并生成站点的 PD F文件。

首先，我们启动浏览器（仅在 headless 模式下支持 PDF 生成），然后打开新页面，设置视口，并导航到提供的URL。

设置 waitUntil:'networkidle0' 选项意味着当至少500毫秒没有网络连接时，Puppeteer 会认为导航已完成。 （可以从 API docs 获取更多信息。）

之后，我们将 PDF 保存为变量，关闭浏览器并返回 PDF。

注意：page.pdf 方法接收 options 对象，你可以使用 'path' 选项将文件保存到磁盘。如果未提供路径，则 PDF 将不会被保存到磁盘，而是会得到缓冲区。（稍后我将讨论如何处理它。）

如果需要先登录才能从受保护的页面生成 PDF，首先你要导航到登录页面，检查表单元素的 ID 或名称，填写它们，然后提交表单：

await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.PDF_PASSWORD)
await page.click('#submit')

要始终将登录凭据保存在环境变量中，不要硬编码！

样式控制

Puppeteer 也有这种样式操作的解决方案。你可以在生成 PDF 之前插入样式标记，Puppeteer 将生成具有已修改样式的文件。

await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

将文件发送到客户端并保存

好的，现在你已经在后端生成了一个 PDF 文件。接下来做什么？

如上所述，如果你不把文件保存到磁盘，将会得到一个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。

printPDF.then(pdf => {
 res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
 res.send(pdf)

现在，你只需在浏览器向服务器发送请求即可得到生成的 PDF。

function getPDF() {
 return axios.get(`${API_URL}/your-pdf-endpoint`, {
 responseType: 'arraybuffer',
 headers: {
 'Accept': 'application/pdf'
 }
 })

一旦发送了请求，缓冲区的内容就应该开始下载了。最后一步是将缓冲区数据转换为 PDF 文件。

savePDF = () => {
 this.openModal(‘Loading…’) // open modal
 return getPDF() // API call
 .then((response) => {
 const blob = new Blob([response.data], {type: 'application/pdf'})
 const link = document.createElement('a')
 link.href = window.URL.createObjectURL(blob)
 link.download = `your-file-name.pdf`
 link.click()
 this.closeModal() // close modal
 })
 .catch(err => /** error handling **/)
 }
<button onClick={this.savePDF}>Save as PDF</button>

就这样！如果单击“保存”按钮，那么浏览器将会保存 PDF。

在 Docker 中使用 Puppeteer

我认为这是实施中最棘手的部分 —— 所以让我帮你节省几个小时的百度时间。

官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”。官方文档有疑难解答部分，你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。

如果你在 Alpine 镜像上安装 Puppeteer，请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实：你无法运行最新的 Puppeteer 版本，并且你还需要用一个标记禁用 shm ：

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否则，Puppeteer 子进程可能会在正常启动之前耗尽内存。

方案 3 + 1：CSS 打印规则

可能有人认为从开发人员的角度来看，简单地使用 CSS 打印规则很容易。没有 NPM 模块，只有纯 CSS。但是在跨浏览器兼容性方面，它的表现如何呢？

在选择 CSS 打印规则时，你必须在每个浏览器中测试结果，以确保它提供的布局是相同的，并且它不是100％能做到这一点。

例如，在给定元素后面插入一个 break-after 并不是一个多么高深的技术，但是你可能会惊讶的发现要在 Firefox 中使用它需要使用变通方法。

除非你是一位经验丰富的 CSS 大师，在创建可打印页面方面有很多的经验，否则这可能会非常耗时。

如果你可以使打印样式表保持简单，打印规则是很好用的。

让我们来看一个例子吧。

@media print {
 .print-button {
 display: none;
 }
 
 .content p {
 break-after: always;
 }
}

上面的 CSS 隐藏了打印按钮，并在每个 p 之后插入一个分页符，其中包含content 类。有一篇很棒的文章总结了你可以用打印规则做什么，以及它们有什么问题，包括浏览器兼容性。

考虑到所有因素，如果你想从不那么复杂的页面生成 PDF，CSS打印规则非常有效。

总结

让我们快速回顾前面介绍的方案，以便从 HTML 页面生成 PDF 文件：

从 DOM 产生截图：当你需要从页面创建快照时（例如创建缩略图）可能很有用，但是当你需要处理大量数据时就会有些捉襟见肘。

只用 PDF 库：如果你打算从头开始以编程方式创建 PDF 文件，这是一个完美的解决方案。否则，你需要同时维护 HTML 和 PDF 模板，这绝对是一个禁忌。

Puppeteer：尽管在 Docker 上工作相对困难，但它为我们的实现提供了最好的结果，而且编写代码也是最简单的。

CSS打印规则：如果你的用户受过足够的教育，知道如何把页面内容打印到文件，并且你的页面相对简单，那么它可能是最轻松的解决方案。正如你在我们的案例中所看到的，事实并非如此。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的HTML视频教程栏目！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com