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

在當今的數位世界中，將網頁或 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 專案。 請依照以下步驟開始：

1. 如果尚未安裝 NodeJS，請先安裝（您可以從 NodeJS 官方網站 下載）。

2. 為您的專案建立一個新資料夾，並在 Visual Studio Code 或任何特定的程式碼編輯器中打開它。

3. 執行npm init來為您的專案創建一個新的package.json檔案。 按照提示填寫所需的資訊。

   

4. 通過運行npm install puppeteer來安裝Puppeteer。

   ！如何在 Node.js 中將 HTML 轉換為 PDF：圖 2

   現在我們已經設定好專案，讓我們深入研究程式碼吧。

載入 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. 模擬「螢幕」媒體類型，以應用用於螢幕的 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. 調用exportWebsiteAsPdf函數，使用已加載的html字符串和所需的outputPath。

3. 使用.then區塊來處理成功的PDF創建，並在控制台中記錄成功訊息。

4. 使用.catch區塊來管理在HTML轉換為PDF的過程中發生的任何錯誤，並將錯誤訊息記錄到控制台。

   此代碼片段提供了一個全面的範例，說明如何使用 NodeJS 和 Puppeteer 將 HTML 範本轉換為 PDF 文件。 通過實施此解決方案，您可以高效生成高品質的 PDF，滿足各種應用程序和使用者的需求。

   

將網址轉換為 PDF 檔案

除了轉換 HTML 模板之外，Puppeteer 還允許您將網址直接轉換為 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，並使用將waitUntil選項設置為networkidle0來等待網路變為空閒。

4. 模擬「螢幕」媒體類型，以確保使用於螢幕的 CSS 被應用，而不是特定於列印的樣式。

5. 將載入的網頁轉換為具有指定邊距、背景列印和格式（A4）的 PDF 文件。

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 的主要功能

使用IronPDF將HTML轉換為PDF：IronPDF允許您將包括CSS在內的HTML內容轉換為PDF文件。 此功能讓您能夠從網頁或 HTML 模板創建精確的 PDF 文件。

URL 渲染：IronPDF 能夠使用 URL 直接從伺服器獲取網頁並將其轉換為 PDF 文件，這讓歸檔網頁內容或從動態網頁生成報告變得簡單。

文本、圖片和 PDF 合併：IronPDF 允許您將文本、圖片和現有的 PDF 文件合併成一個 PDF 文檔。 此功能特別適合用於創建包含多個內容來源的複雜文檔。

PDF 操作：IronPDF 提供編輯現有 PDF 檔案的工具，例如，添加或刪除頁面、修改元數據，甚至從 PDF 文件中提取文字和圖片。

結論

總之，生成和操作 PDF 檔案是許多應用程式中的常見需求，擁有合適的工具是至關重要的。 本文中提供的解決方案，例如使用 Puppeteer 配合 NodeJS 或使用 IronPDF 配合 .NET，提供了強大且高效的方法，將 HTML 內容和 URL 轉換為專業、高品質的 PDF 文件。

IronPDF 特別以其豐富的功能集脫穎而出，成為 .NET 開發人員的首選。 IronPDF 提供免費試用，讓您探索其功能。

使用者也可以從Iron Suite套件中受益，這是一組包含五個專業.NET程式庫的套件，包括IronXL、IronPDF、IronOCR等。