PDF 工具

如何使用 Puppeteer 在 Node.js 中將 HTML 轉換為 PDF

發佈 2023年5月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。
調用 exportWebsiteAsPdf 函數，將加載的 html 字串和所需的 outputPath 傳入。
利用 .then 區塊處理 PDF 的成功建立，並將成功訊息記錄到控制台。
使用 .catch 區塊來處理在 HTML 轉換為 PDF 過程中發生的任何錯誤，並將錯誤訊息記錄到控制台。
此代碼片段提供了一個全面的範例，說明如何使用 NodeJS 和 Puppeteer 將 HTML 範本轉換為 PDF 文件。通過實施此解決方案，您可以高效生成高品質的 PDF，滿足各種應用程序和使用者的需求。

將網址轉換為 PDF 檔案

除了轉換 HTML 模板之外，Puppeteer 還允許您將網址直接轉換為 PDF 文件。

導入Puppeteer


    const puppeteer = require('puppeteer');


    const puppeteer = require('puppeteer');

NODE.JS

程式碼首先匯入了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;
    }

NODE.JS

exportWebsiteAsPdf 函式是我們程式碼片段的核心。此非同步函式接受 websiteUrl 和 outputPath 作為其輸入參數並輸出一個 PDF 檔案。該函式執行以下步驟：

使用 Puppeteer 啟動一個新的無頭瀏覽器實例。
創建一個新的瀏覽器頁面。
導航至提供的 websiteUrl，並使用 waitUntil 選項設置為 networkidle0，等待網絡空閒。
模擬「螢幕」媒體類型，以確保使用於螢幕的 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 創建。在這個區塊中，我們將成功訊息記錄到控制台。
在網站轉換為 PDF 的過程中，使用 catch 區塊來處理發生的任何錯誤。如果發生錯誤，我們會將錯誤訊息記錄到控制台。
通過將此代碼片段集成到您的項目中，您可以使用NodeJS和Puppeteer輕鬆將URL轉換為高質量的PDF文件。

C# 開發人員最佳 HTML 到 PDF 函式庫

探索 IronPDF是一個流行的 .NET 函式庫，用於生成、編輯和提取 PDF 文件中的內容。它提供了一種簡單而高效的解決方案，用於從 HTML、文本、圖像和現有的 PDF 文件生成 PDF。 IronPDF 支援 .NET Core、.NET Framework 和 .NET 5.0+ 專案，使其成為各類應用程式的多功能選擇。