📌  相关文章
📜  node js 从 html 创建 pdf - Javascript (1)

📅  最后修改于: 2023-12-03 15:17:53.587000             🧑  作者: Mango

Node.js 从 HTML 创建 PDF

如果你是一位前端工程师，你可能已经在寻找一种方法，将你在浏览器中设计的 HTML 转换成 PDF 格式。在这篇文章中，我们将探讨使用 Node.js 来创建 PDF 的方法。

安装依赖

首先，你需要安装两个 npm 包：puppeteer 和 handlebars。puppeteer 是一个 Headless Chrome Node.js API，用于生成 PDF，而 handlebars 则是一个 JavaScript 模板引擎，用于为 puppeteer 提供 HTML 模板。

npm install puppeteer handlebars --save
创建 HTML 模板

接下来，在根目录中创建一个名为 template.html 的文件，我们将在这个文件中编写 HTML 模板。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
  </head>
  <body>
    <h1>{{heading}}</h1>
    <p>{{content}}</p>
  </body>
</html>

在这个模板中，我们使用了 handlebars 语法，它允许我们在模板中插入变量。在运行时，这些变量将由 puppeteer API 动态替换为真实值。

使用 puppeteer 创建 PDF

接下来，在根目录中创建一个名为 index.js 的文件，并在其中添加以下代码，使用 puppeteer 生成 PDF 文件。

const puppeteer = require('puppeteer');
const Handlebars = require('handlebars');
const fs = require('fs');

(async () => {
  // 读取 HTML 模板
  const templateHtml = fs.readFileSync('./template.html', 'utf8');

  // 编译模板
  const template = Handlebars.compile(templateHtml);

  // 获取编译后的 HTML
  const html = template({
    title: 'My PDF',
    heading: 'Hello, World!',
    content: 'This is a sample PDF generated with Node.js and Puppeteer.'
  });

  // 创建浏览器实例并打开页面
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(html);

  // 生成 PDF 文件
  await page.pdf({ path: 'my-pdf.pdf', format: 'A4' });

  // 关闭浏览器实例
  await browser.close();
})();

在这个示例中，我们首先读取了 template.html 文件，并将其编译为 Handlebars 模板。然后，我们将模板传递为参数，在运行时使用 puppeteer API 替换变量，最后生成 PDF 文件并保存到 my-pdf.pdf 文件中。

运行程序

最后，我们可以使用以下命令，运行我们的程序并生成 PDF 文件。

node index.js

现在，你应该已经成功地使用 Node.js 和 puppeteer 生成了一个 PDF 文件，它的内容与我们在 HTML 模板中定义的相同。

总结

在本文中，我们已经了解了如何使用 Node.js 和 puppeteer 来生成 PDF 文件。我们使用 handlebars 模板引擎编写了一个 HTML 模板，并通过 puppeteer API 动态替换其变量。最后，我们成功地将 HTML 转换为 PDF 文件，并将其保存到磁盘上。

参考