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

在當今的數位世界中，能夠將網頁或HTML文件轉換成PDF文件是至關重要的。這在生成報告、創建發票或只是以更具呈現性的格式分享資訊時非常有用。在這篇博客文章中，我們將探討如何使用Node.js和由谷歌開發的開源庫Puppeteer將HTML頁面轉換成PDF。

Puppeteer 簡介

Puppeteer 是一個強大的 Node.js 函式庫，允許開發人員控制無頭瀏覽器，主要是 Google Chrome 或 Chromium，並執行各種操作，如網頁抓取、截圖和生成 PDF。Puppeteer 提供了一個廣泛的 API 與瀏覽器進行互動，使其成為將 HTML 轉換為 PDF 的絕佳選擇。

為什麼選擇Puppeteer？

• 易用性： Puppeteer 提供了一個簡單易用的 API，將使用無頭瀏覽器的複雜性抽象化。
• 強大功能： Puppeteer 具備豐富的操作網頁和與瀏覽器元素交互的能力。
• 可擴展性： 使用 Puppeteer，您可以通過同時運行多個瀏覽器實例，輕鬆擴展您的 PDF 生成過程。

設定您的 NodeJS 專案

在我們開始之前，您需要設定一個新的 NodeJS 專案。請按照以下步驟開始：

1. 如果還沒有安裝 NodeJS，請先安裝。 (您可以從 這裡)。

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

3. 執行 npm init 以為您的專案建立一個新的 package.json 文件。按照提示填寫所需信息。

   

4. 安裝 Puppeteer，運行 npm install 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使您能夠自動化各種基於Web的任務，包括渲染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，滿足各種應用和使用者的需求。

將網址轉換為 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. 模擬 '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 文件是許多應用程序中的常見需求，擁有合適的工具至關重要。本文提供的解決方案，如使用 Puppeteer with NodeJS 或 IronPDF with .NET，為將 HTML 內容和 URL 轉換為專業高質量 PDF 文檔提供了強大而高效的方法。

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

用戶也可以受益於 Iron Suite, 一套包含5個專業.NET函式庫的ชุด IronXL, IronPDF, IronOCR 及更多。