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

為什麼選擇木偶師？

*易用性：* 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. 模擬"螢幕"媒體類型，套用螢幕使用的 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 文件，滿足各種應用程式和使用者的需求。

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

導入 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. 模擬"螢幕"媒體類型，以確保應用程式螢幕使用的 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 檔案。

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

IronPDF 的主要特點

使用 IronPDF 將 HTML 轉換為 PDF ：IronPDF 可讓您將 HTML 內容（包括 CSS）轉換為 PDF 檔案。 此功能可讓您從網頁或 HTML 範本建立像素級完美的 PDF 文件。

URL 渲染： IronPDF 可以使用 URL 直接從伺服器取得網頁並將其轉換為 PDF 文件，從而輕鬆存檔網頁內容或從動態網頁產生報告。

文字、圖像和 PDF 合併： IronPDF 讓您可以將文字、圖像和現有 PDF 文件合併到一個 PDF 文件中。 此功能對於建立包含多個內容來源的複雜文件尤其有用。

PDF 操作： IronPDF 提供用於編輯現有 PDF 文件的工具，例如新增或刪除頁面、修改元數據，甚至從 PDF 文件中提取文字和圖像。