作为 Web 开发人员，你可能希望生成网页的 PDF 文件以与你的客户共享、在演示文稿中使用它或将其添加为你的 Web 应用程序中的新功能。无论你出于何种原因，Google 的无头 Chrome 和 Chromium Node API Puppeteer 都能让你轻松完成任务。
NodeJS如何将网页转换为PDF？在本教程中，我们将看到如何使用 Puppeteer 和 Node.js 将网页转换为 PDF，包括将网页转换为PDF示例。让我们先快速介绍一下 Puppeteer 是什么。
什么是 Puppeteer，为什么它很棒？
用 Google 自己的话来说，Puppeteer 是“一个Node库，它提供了一个高级 API 来通过 DevTools 协议控制无头 Chrome 或 Chromium”。
什么是无头浏览器？
如果你不熟悉“无头浏览器”这个术语，那么它只是一个没有 GUI 的浏览器。从这个意义上说，无头浏览器只是另一个了解如何呈现 HTML 网页和处理 JavaScript 的浏览器。由于缺少 GUI，与无头浏览器的交互是通过命令行进行的。
尽管 Puppeteer 主要是无头浏览器，但你可以将其配置为非无头 Chrome 或 Chromium。
你可以用 Puppeteer 做什么？
Puppeteer 强大的浏览器功能使其成为网络应用程序测试和网络抓取的完美候选者。
举几个 Puppeteer 为 Web 开发人员提供完美功能的用例，
- 生成网页的 PDF 和屏幕截图
- 自动提交表单
- 抓取网页
- 执行自动化 UI 测试，同时保持测试环境最新。
- 为单页应用程序 (SPA) 生成预渲染内容
设置项目环境
如何使用Puppeteer和NodeJS将网页转换为PDF？你可以在后端和前端使用 Puppeteer 生成 PDF。在本教程中，我们使用 Node 后端来完成任务。
初始化 NPM 并设置常用的 Express 服务器以开始学习本教程。
const express = require("express");
const puppeteer = require("puppeteer");
const app = express();
app.listen(3000, () => {
console.log("Server started");
});
在开始之前，请确保使用以下命令安装 Puppeteer NPM 包。
npm install puppeteer
将网页转换为 PDF
NodeJS如何将网页转换为PDF？现在我们进入教程的激动人心的部分。使用 Puppeteer，我们只需要几行代码即可将网页转换为 PDF。
首先，使用 Puppeteer 的launch函数创建一个浏览器实例。
const browser = await puppeteer.launch();
将网页转换为PDF示例：然后，我们创建一个新的页面实例并使用 Puppeteer 访问给定的页面 URL。
const webPage = await browser.newPage();
const url = "https://livecodestream.dev/post";
await webPage.goto(url, {
waitUntil: "networkidle0"
});
我们已将waitUntil选项设置为networkidle0。当我们使用networkidle0option 时，Puppeteer 会等待，直到最近 500 毫秒内没有新的网络连接。它是一种判断站点是否加载完成的方法。这并不准确，Puppeteer 提供了其他选项，但它是大多数情况下最可靠的选项之一。
最后，我们根据抓取的页面内容创建 PDF 并将其保存到我们的设备中。
await webPage.pdf({
printBackground: true,
path: "webpage.pdf",
format: "Letter",
margin: {
top: "20px",
bottom: "40px",
left: "20px",
right: "20px"
}
});
await browser.close();
打印到PDF 功能 非常复杂，并且允许进行大量自定义，这太棒了。以下是我们使用的一些选项：
- printBackground：当此选项设置为 true 时，Puppeteer会将你在网页上使用的任何背景颜色或图像打印到 PDF。
- path : Path 指定保存生成的 PDF 文件的位置。你还可以将其存储到内存流中以避免写入磁盘。
- format：你可以将 PDF 格式设置为给定选项之一：Letter、A4、A3、A2 等。
- margin：你可以使用此选项为生成的 PDF 指定边距。
PDF 创建完成后，使用 关闭浏览器连接browser.close()。
构建 API 以从 URL 生成和响应 PDF
NodeJS如何将网页转换为PDF？有了到目前为止我们收集的知识，我们现在可以创建一个新的端点，它将接收一个 URL 作为查询字符串，然后它将生成的 PDF 流回客户端。
这是将网页转换为PDF示例代码：
const express = require("express");
const puppeteer = require("puppeteer");
const app = express();
app.get("/pdf", async (req, res) => {
const url = req.query.target;
const browser = await puppeteer.launch({
headless: true
});
const webPage = await browser.newPage();
await webPage.goto(url, {
waitUntil: "networkidle0"
});
const pdf = await webPage.pdf({
printBackground: true,
format: "Letter",
margin: {
top: "20px",
bottom: "40px",
left: "20px",
right: "20px"
}
});
await browser.close();
res.contentType("application/pdf");
res.send(pdf);
})
app.listen(3000, () => {
console.log("Server started");
});
如何使用Puppeteer和NodeJS将网页转换为PDF？如果你启动服务器并访问/pdf路由，带有target包含我们要转换的 URL的查询参数。服务器将直接提供生成的 PDF，而无需将其存储在磁盘上。
网址示例： http://localhost:3000/pdf?target=https://google.com
这将在图像上生成以下 PDF：
就是这样！你已完成网页到 PDF 的转换。那不是很容易吗？
如前所述，Puppeteer 提供了许多自定义选项，因此请确保你有机会获得不同的结果。
接下来，我们可以更改视口大小以捕获不同分辨率下的网站。
捕获具有不同视口的网站
在之前创建的 PDF 中，我们没有指定 Puppeteer 正在访问的网页的视口大小，而是使用了默认的视口大小，800×600px。
但是，我们可以在抓取页面之前精确设置页面的视口大小。
await webPage.setViewport({ width: 1200, height: 800 });
await webPage.goto(url, {
waitUntil: "networkidle0"
});
结论
NodeJS如何将网页转换为PDF？在今天的教程中，我们使用 Puppeteer，一个用于无头 Chrome 的 Node API，生成给定网页的 PDF。由于你现在已经熟悉 Puppeteer 的基础知识，因此你可以在未来使用这些知识来创建 PDF，甚至可以用于其他目的，例如网页抓取和 UI 测试。
