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

為什麼選擇 Puppeteer？

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

導入 Puppeteer 和 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: true // Launches the browser in headless mode
  });

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

  // Set the HTML content for the page, waiting for DOM content to load
  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 內容加載。
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');

// Convert the HTML content into a PDF and save it to the specified path
exportWebsiteAsPdf(html, 'result.pdf').then(() => {
  console.log('PDF created successfully.');
}).catch((error) => {
  console.error('Error creating PDF:', error);
});

代碼的最後部分展示了如何使用 exportWebsiteAsPdf 函數。 我們執行以下步驟：

1. 使用 fs 模塊的 readFileSync 方法從 HTML 文件中讀取 HTML 內容。
2. 使用加載的 html 字符串和所需的 outputPath 調用 exportWebsiteAsPdf 函數。
3. 使用 .then 塊處理成功的 PDF 創建，將成功信息記錄到控制台。
4. 使用 .catch 塊處理 HTML 到 PDF 轉換過程中發生的任何錯誤，將錯誤信息記錄到控制台。

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

導入 Puppeteer

const puppeteer = require('puppeteer');

代碼開始於導入 Puppeteer 庫，這是一個用於控制像 Chrome 和 Chromium 這樣的無頭瀏覽器的強大工具。 Puppeteer 允許您自動化多種基於 Web 的任務，包括渲染您的 HTML 代碼、截屏，以及在我們的情況下，生成 PDF 文件。

定義 exportWebsiteAsPdf 函數

async function exportWebsiteAsPdf(websiteUrl, outputPath) {
  // Create a browser instance
  const browser = await puppeteer.launch({
    headless: true // Launches the browser in headless mode
  });

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

  // Open the URL in the 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. 將加載的網頁轉換為具有指定邊距、背景打印和格式（A4）的 PDF 文件。
6. 關閉瀏覽器實例。
7. 返回生成的 PDF 文件。

使用 exportWebsiteAsPdf 函數

// Usage example
// Convert the URL content into a PDF and save it to the specified path
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 文件。

IronPDF的核心特性

使用 IronPDF 進行 HTML 到 PDF 轉換：IronPDF 允許您將 HTML 內容（包括 CSS）轉換為 PDF 文件。 此功能使您能夠從網頁或 HTML 模板創建像素完美的 PDF 文件。

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

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

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