使用 Node.js 和 Puppeteer 创建 PDF

2025-06-07

使用 Node.js 和 Puppeteer 创建 PDF

我喜欢演奏音乐，尤其是在乐队里。多人合奏、乐器和声的协同效应令人惊叹。然而，一个乐队要想成功，每个人都必须步调一致，否则听起来就会乱成一团。

仔细想想，我可以把一群配合默契的乐队成员和一个高效的软件团队做很多比较。不过，我跑题了。下次再说吧！

乐队达成共识的方法之一是遵循乐谱或和弦图。

我最近更新了一个名为“Charter”的个人项目，它使用 Node.js 将 ChordPro 格式的文本文件转换为 PDF 和弦图。这真是太有趣了！

现在，你可能会想，

“我不是音乐家或歌手。我为什么要关心这些？”

无论你个人对和弦图的需求如何，你都可能会发现这个项目的源代码很有用。以下是一些你可能会学到的东西：

  • 使用 Node.js 和 Yargs 创建 CLI 应用程序
  • 加载文本文件并解析文本
  • 使用 Jest 测试 Node.js 代码
  • 使用 Handlebars 将文本转换为 HTML
  • 使用 Puppeteer 将 HTML 转换为 PDF

关于 PDF 渲染，我尝试了很多解决方案，包括wkhtmltopdf、electron-pdf、phantomjs，以及使用命令行开关自动化 Chrome等，最后决定使用最新版本的Puppeteer。Puppeteer 支持大量生成 PDF 的选项。它蕴藏着巨大的潜力，可以实现很多很酷的功能！

使用 Node.js 将任何网页保存为 PDF

假设您已经安装了Node.js，打开您的终端或命令行，创建一个新的项目文件夹，并初始化它。

mkdir pdf-test
cd pdf-test
npm init -y
Enter fullscreen mode Exit fullscreen mode

接下来，安装 Puppeteer 作为依赖项。

npm install puppeteer
Enter fullscreen mode Exit fullscreen mode

以下是使用 Puppeteer 将 Google 主页转换为 PDF 的示例。创建一个名为 的新文件index.js并粘贴以下代码。

"use strict";

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://google.com");
  await page.pdf({ path: "./google.pdf", format: "Letter" });
  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

使用以下命令运行该应用程序。

node .
Enter fullscreen mode Exit fullscreen mode

您可以将 URL 更改为其他内容，例如 dev.to 主页。请注意，某些页面使用 JavaScript 动态加载，因此如果不设置更多选项，生成的 PDF 可能会显示不完整。

将本地 HTML 文件转换为 PDF

Puppeteer 的功能不仅限于加载网页，还可以加载本地 HTML 文件。Charter 应用程序就是这样创建和弦图的。Charter 应用程序首先解析 ChordPro 文本文件，生成 HTML 文件，然后使用 Puppeteer 渲染 HTML 文件并保存为 PDF。

创建一个名为的新文件sample.html并粘贴以下 HTML。

<!DOCTYPE html>
<html>
<head>
  <style>
    * html,
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Yay! My own PDF generator!</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

创建一个名为的新文件local.js并粘贴以下代码。

"use strict";

const path = require("path");
const puppeteer = require("puppeteer");

(async () => {
  const htmlFile = path.resolve("./sample.html");
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("file://" + htmlFile);
  await page.pdf({ path: "./sample.pdf", format: "Letter" });
  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

接下来，从命令行运行代码。

node local.js
Enter fullscreen mode Exit fullscreen mode

现在，您应该在项目文件夹中拥有自己的“Hello World！”PDF！

使用 Charter 创建和弦图

如果您已安装 Node.js 12.x 或更高版本，并想试用 CLI 应用，您可以使用它npx直接运行该应用程序。当然，您需要一个 ChordPro 文本文件来进行测试。这里有一个示例，您也可以在网上找到其他示例。

{title: Amazing Grace}
{artist: Words by: John Newton, John P. Rees}
{artist: Music by: William W. Walker, Edwin Othello Excell}
{key: G}  
{tempo: 90}
{time: 3/4 }

{comment: Verse 1}
A - [G]mazing [G/D]grace  [D7]how  [Em]sweet [C]the   [G]sound
That [G]saved a [G/D]wretch  [D/C]like    [G/B]me
I [G]once was [G/B]lost but [C]now am  [G]found
[G/B]Was   [Em]blind but [G/D]now    [D7]I    [G]see
Enter fullscreen mode Exit fullscreen mode

npx由于 Puppeteer 使用 Chromium，第一次下载需要一点时间。

npx chord-charter -f amazing-grace.chordpro
Enter fullscreen mode Exit fullscreen mode

希望你觉得这个项目有用！快来参与，成就精彩！

文章来源：https://dev.to/reverentgeek/convert-text-html-to-pdf-with-node-js-and-puppeteer-4c53
Devto 翻译
PREV
你讨厌 JavaScript 吗？
NEXT
如何构建 React 表单组件