如何使用Puppeteer在Node.js中将HTML转换成PDF

在当今的数字世界中，将网页或 HTML 文档转换为 PDF 文件的能力至关重要。这对于生成报告、创建发票或只是以更易于展示的格式共享信息非常有用。在本博文中，我们将探讨如何使用 Node.js 和 Puppeteer（Google 开发的开源库）将 HTML 页面转换为 PDF。

木偶师简介

Puppeteer 是一个功能强大的 Node.js 库，允许开发人员控制无头浏览器（主要是谷歌 Chrome 浏览器或 Chromium 浏览器），并执行各种操作，如网页抓取、截图和生成 PDF。Puppeteer 提供了与浏览器交互的广泛 API，是将 HTML 转换为 PDF 的绝佳选择。

为什么是 "傀儡廻"？

• 易用性： Puppeteer 提供简单易用的应用程序接口（API），抽象化了无头浏览器工作的复杂性。
• 功能强大： Puppeteer 为操作网页和与浏览器元素交互提供了广泛的功能。
• 可扩展： 使用 Puppeteer，您可以并行运行多个浏览器实例，从而轻松扩展 PDF 生成流程。

设置 NodeJS 项目

在开始之前，您需要设置一个新的 NodeJS 项目。请按照以下步骤开始：

1.安装 NodeJS（如果尚未安装 (您可以从 *这里***).

2.为项目创建一个新文件夹，然后在 Visual Studio Code 或任何特定的代码编辑器中打开。

3.运行 npm init 为项目创建一个新的 package.json 文件。按照提示填写所需信息。

![如何在 Node.js 中将 HTML 转换为 PDF：图 1](/static-assets/pdf/blog/html-to-pdf-node-js-tutorial/html-to-pdf-node-js-tutorial-1.webp)

4.运行 npm install puppeteer 安装 Puppeteer。

现在，我们已经建立好项目，让我们开始编写代码。

加载 HTML 模板并转换为 PDF 文件

要使用 Puppeteer 将 HTML 模板转换为 PDF 文件，请按以下步骤操作：

在文件夹中创建名为 "HTML To PDF.js "的文件。

导入 Puppeteer 和 fs

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

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

代码首先要导入两个基本库：puppeteer "是控制 Chrome 和 Chromium 等无头浏览器的通用工具，"fs "是处理文件系统操作的内置 NodeJS 模块。Puppeteer 可让您自动执行各种基于网络的任务，包括渲染 HTML、截图和生成 PDF 文件。

定义 exportWebsiteAsPdf 函数

    async function exportWebsiteAsPdf(html, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      await page.setContent(html, { waitUntil: 'domcontentloaded' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

    async function exportWebsiteAsPdf(html, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      await page.setContent(html, { waitUntil: 'domcontentloaded' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

exportWebsiteAsPdf "函数是我们代码片段的核心。这个异步函数接受一个 html 字符串和一个 outputPath 作为输入参数，并返回一个 PDF 文件。该函数执行以下步骤：

1.使用 Puppeteer 启动一个新的无头浏览器实例。

2.创建新的浏览器页面。

3.将提供的 html 字符串设置为页面内容，等待加载 DOM 内容。我们会将 html 模板加载为 HTML 字符串，以便将其转换为 PDF 格式。

4.模拟 "screen "媒体类型，以应用用于屏幕的 CSS 而非特定于印刷的样式。

5.从加载的 HTML 内容生成 PDF 文件，指定页边距、背景打印和格式 (A4).

6.关闭浏览器实例。

7.返回创建的 PDF 文件。

使用 exportWebsiteAsPdf 函数

    // Usage example
    //Get HTML content from HTML file
    const html = fs.readFileSync('test.html', 'utf-8');

    exportWebsiteAsPdf(html, 'result.PDF').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

    // Usage example
    //Get HTML content from HTML file
    const html = fs.readFileSync('test.html', 'utf-8');

    exportWebsiteAsPdf(html, 'result.PDF').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

代码的最后一部分说明了如何使用 exportWebsiteAsPdf 函数。我们执行以下步骤：

1.使用 fs 模块的 readFileSync 方法从 HTML 文件读取 HTML 内容。这里我们加载模板文件，以便从 HTML 页面生成 PDF。

2.使用加载的 html 字符串和所需的 outputPath 调用 exportWebsiteAsPdf 函数。

3.利用 .then 块处理成功创建的 PDF，并将成功信息记录到控制台。

4.使用.catch代码块处理 HTML 到 PDF 转换过程中出现的任何错误，并将错误信息记录到控制台。

本代码片段提供了一个综合示例，说明如何使用 NodeJS 和 Puppeteer 将 HTML 模板转换为 PDF 文件。通过实施该解决方案，您可以高效地生成高质量的 PDF 文件，满足各种应用程序和用户的需求。

将 URL 转换为 PDF 文件

除了转换 HTML 模板，Puppeteer 还允许你将 URL 直接转换为 PDF 文件。

导入 Puppeteer

    const puppeteer = require('puppeteer');

    const puppeteer = require('puppeteer');

代码首先导入 Puppeteer 库，它是控制 Chrome 和 Chromium 等无头浏览器的强大工具。Puppeteer 允许你自动执行各种基于网络的任务，包括渲染 HTML 代码、截图，以及在我们的案例中生成 PDF 文件。

定义 exportWebsiteAsPdf 函数

    async function exportWebsiteAsPdf(websiteUrl, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      // Open URL in current page
      await page.goto(websiteUrl, { waitUntil: 'networkidle0' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

    async function exportWebsiteAsPdf(websiteUrl, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      // Open URL in current page
      await page.goto(websiteUrl, { waitUntil: 'networkidle0' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

exportWebsiteAsPdf "函数是我们代码片段的核心。这个异步函数接受一个 websiteUrl 和一个 outputPath 作为输入参数，并返回一个 PDF 文件。该函数执行以下步骤：

1.使用 Puppeteer 启动一个新的无头浏览器实例。

2.创建新的浏览器页面。

3.导航到提供的 websiteUrl 并使用设置为 networkidle0 的 waitUntil 选项等待网络空闲。

4.模拟 "screen "媒体类型，以确保应用用于屏幕的 CSS，而不是打印特定的样式。

5.将加载的网页转换为具有指定页边、背景打印和格式的 PDF 文件 (A4).

6.关闭浏览器实例。

7.返回生成的 PDF 文件。

使用 exportWebsiteAsPdf 函数

    // Usage example
    exportWebsiteAsPdf('https://ironpdf.com/', 'result.pdf').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

    // Usage example
    exportWebsiteAsPdf('https://ironpdf.com/', 'result.pdf').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

代码的最后一部分演示了如何使用 exportWebsiteAsPdf 函数。我们执行以下步骤：

1.使用所需的 websiteUrl 和 outputPath 调用 exportWebsiteAsPdf 函数。

2.使用 then 块来处理成功创建的 PDF。在该代码块中，我们将向控制台记录一条成功消息。

3.使用 "catch "代码块来处理网站到 PDF 转换过程中出现的任何错误。如果发生错误，我们会在控制台中记录一条错误消息。

将此代码片段集成到您的项目中，您就可以使用 NodeJS 和 Puppeteer 轻松地将 URL 转换为高质量的 PDF 文件。

C#开发人员的最佳 HTML 转 PDF 库

IronPDF 是一个流行的 .NET 库，用于生成、编辑和提取 PDF 文件中的内容。它为从 HTML、文本、图像和现有 PDF 文档创建 PDF 文件提供了简单高效的解决方案。IronPDF 支持 .NET Core、.NET Framework 和 .NET 5.0+ 项目，是各种应用程序的多功能选择。

IronPDF 的主要功能

将 HTML 转换为 PDF**:IronPDF 允许您将 HTML 内容（包括 CSS）转换为 PDF 文件。此功能可让您从网页或 HTML 模板创建像素完美的 PDF 文档。

URL 渲染：IronPDF 可以使用 URL 直接从服务器获取网页并将其转换为 PDF 文件，从而轻松实现网页内容存档或从动态网页生成报告。

文本、图像和 PDF 合并：IronPDF 允许您将文本、图像和现有 PDF 文件合并到一个 PDF 文档中。该功能对于创建具有多种内容来源的复杂文档尤为有用。

PDF 操作：IronPDF 提供编辑现有 PDF 文件的工具，如添加或删除页面、修改元数据，甚至从 PDF 文档中提取文本和图像。

结论

总之，生成和处理 PDF 文件是许多应用程序的共同要求，因此拥有合适的工具至关重要。本文提供的解决方案，如使用 NodeJS 的 Puppeteer 或使用 .NET 的 IronPDF，为将 HTML 内容和 URL 转换为专业、高质量的 PDF 文档提供了强大而高效的方法。

尤其是 IronPDF，它以其广泛的功能集脱颖而出，成为 .NET 开发人员的首选。IronPDF 提供了 免费试用您可以探索它的功能。

用户还可以受益于 Iron Suite由 5 个专业 .NET 库组成的套件，包括 IronXL, IronPDF, IronOCR 以及更多。