PDF 工具

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

发布 2023年五月16日

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

Puppeteer 简介

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

为什么选择 Puppeteer？

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

设置您的 NodeJS 项目

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

如果您还没有安装 NodeJS，请安装(您可以从NodeJS 网站).
为您的项目创建一个新文件夹，并在 Visual Studio Code 或任何特定的代码编辑器中打开。
运行 npm init 为您的项目创建一个新的 package.json 文件。按照提示填写所需信息。
运行 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');

NODE.JS

代码首先要导入两个基本库：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;
    }

NODE.JS

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

使用 Puppeteer 启动一个新的无头浏览器实例。
创建新的浏览器页面。
将提供的 html 字符串设置为页面内容，等待加载 DOM 内容。我们将 html 模板加载为 HTML 字符串，将其转换为 PDF 格式。
模拟 "屏幕 "媒体类型，应用屏幕使用的 CSS，而不是打印特定的样式。
从加载的 HTML 内容生成 PDF 文件，指定页边距、背景打印和格式(A4).
关闭浏览器实例。
返回创建的 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);
    });

NODE.JS

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

使用 fs 模块的 readFileSync 方法从 HTML 文件中读取 HTML 内容。我们正在加载模板文件，以便从 HTML 页面生成 PDF。
使用加载的 html 字符串和所需的 outputPath 调用 exportWebsiteAsPdf 函数。
利用".then "块处理 PDF 的成功创建，并将成功消息记录到控制台。
使用.catch块来管理 HTML 到 PDF 转换过程中出现的任何错误，并将错误信息记录到控制台。
本代码片段提供了一个综合示例，说明如何使用 NodeJS 和 Puppeteer 将 HTML 模板转换为 PDF 文件。通过实施该解决方案，您可以高效地生成高质量的 PDF，满足各种应用程序和用户的需求。

将 URL 转换为 PDF 文件

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

导入 Puppeteer


    const puppeteer = require('puppeteer');


    const puppeteer = require('puppeteer');

NODE.JS

代码首先要导入 Puppeteer 库，它是控制 Chrome 和 Chromium 等无头浏览器的强大工具。 Puppeteer 允许您自动执行各种基于 Web 的任务，包括渲染 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;
    }

NODE.JS

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

使用 Puppeteer 启动一个新的无头浏览器实例。
创建新的浏览器页面。
导航到提供的 websiteUrl 并使用设置为 networkidle0 的 waitUntil 选项等待网络空闲。
模拟 "屏幕 "媒体类型，确保应用屏幕使用的 CSS，而不是打印特定的样式。
将加载的网页转换为具有指定页边、背景打印和格式的 PDF 文件(A4).
关闭浏览器实例。
返回生成的 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);
    });

NODE.JS

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

使用所需的 websiteUrl 和 outputPath 调用 exportWebsiteAsPdf 函数。
使用 "then "块来处理 PDF 的成功创建。在此代码块中，我们将向控制台记录一条成功信息。
使用 "catch "块处理网站到 PDF 转换过程中出现的任何错误。如果出现错误，我们会将错误信息记录到控制台。
将此代码片段集成到您的项目中，您就可以使用 NodeJS 和 Puppeteer 毫不费力地将 URL 转换为高质量的 PDF 文件。

最适合 C# 开发人员的 HTML To PDF 库

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