1. IronPDF
  2. 操作指南
  3. JavaScript（自訂渲染延遲）
如何使用 C# 透過 JavaScript 將 HTML 轉換為 PDF

如何在 C# 中使用 JavaScript 將 HTML 轉換為 PDF

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF 透過其 Chromium 渲染引擎，可在 HTML 轉 PDF 過程中執行 JavaScript。您可在 .NET C# 應用程式中，將包含 JavaScript 和 jQuery 的動態網頁內容轉換為 PDF 文件，並支援互動式元素與動態渲染。

JavaScript 是一種用於網頁開發的高階、多功能程式語言。 它能讓網站具備互動式與動態功能。 jQuery 是一套 JavaScript 函式庫，可簡化諸如 DOM 操作、事件處理及 AJAX 請求等常見任務。

IronPDF 透過 Chromium 渲染引擎支援 JavaScript。本文將示範如何在 .NET C# 專案中，於 HTML 轉 PDF 的過程中使用 JavaScript 和 jQuery。 IronPDF 提供 IronPDF 的免費試用版供測試使用。 若需在轉換前對 HTML 進行除錯，請參閱我們關於使用 Chrome 除錯 HTML 的指南。

快速入門：在 .NET 中使用 JavaScript 將 HTML 轉換為 PDF

在 .NET 專案中使用 IronPdf 將包含 JavaScript 的 HTML 頁面轉換為 PDF。 透過對 Chromium 渲染引擎的支援，所有 JavaScript 元素皆能被精確處理。 此範例展示如何將包含動態內容的網頁渲染為 PDF。 只需一次方法呼叫，即可渲染並儲存您的 PDF 文件。

  1. using NuGet 套件管理員安裝 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 請複製並執行此程式碼片段。

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.pdf");

  3. 部署至您的生產環境進行測試

    立即透過免費試用，在您的專案中開始使用 IronPDF

    arrow pointer

如何設定基本工作流程？

  1. 下載 C# 函式庫：將 HTML 轉換為 PDF
  2. EnableJavaScript 屬性
  3. RenderFromHtmlToPdf：確保支援 JavaScript 程式碼
  4. 執行自訂 JavaScript：在您的 .NET C# 程式碼中
  5. 擷取主控台訊息：使用 JavaScript 訊息監聽器

將 HTML 轉換為 PDF 時，該如何處理 JavaScript？

轉換為 PDF/A 時，支援 HTML 中的 JavaScript。 由於渲染是即時進行的，因此 JavaScript 可能無法正確執行。 請在渲染選項中設定 RenderingOptions 類別，以允許 JavaScript 執行時間。以下程式碼使用 WaitFor 並設定最大等待時間為 500 毫秒。有關等待時間與渲染延遲的詳細資訊，請參閱我們關於使用 WaitFor 來延遲 PDF 渲染的指南。

WaitFor
WaitFor

為什麼 WaitFor 對 JavaScript 執行如此重要？

由於 .NET Framework 中的 JavaScript 執行記憶體有限，複雜的 JavaScript 框架可能需要調整記憶體分配。 RenderingOptions 提供選項，確保在生成 PDF 之前完整執行 JavaScript。 等待 JavaScript 執行、網路閒置狀態、HTML 元素或自訂渲染延遲。 瞭解可用的渲染選項，以優化 PDF 生成效果。

何時該使用 notifyRender 方法？

notifyRender 方法表示 JavaScript 執行已完成，可確保動態內容在適當的時機進行渲染。 請將其用於必須在 PDF 生成前完成的非同步操作或動畫。 此方法採用 notifySettings 設定，以實現精確的渲染控制。

CustomJavaScript
InjectJavaScript
CaptureConsoleMessages

常見的 JavaScript 渲染問題有哪些？

複雜的框架可能需要額外的等待時間或記憶體分配。 常見問題包括：

  • 渲染前未載入的非同步資料
  • 捕捉過渡過程中的 CSS 動畫
  • 導致無法渲染的 JavaScript 錯誤
  • 大型框架造成的記憶體限制

若需進行疑難排解，請啟用自訂記錄功能以擷取渲染過程的詳細資訊。

如何在 PDF 渲染前執行自訂 JavaScript？

請在渲染選項中使用 CustomJavaScript 屬性，以便在渲染前執行自訂 JavaScript。 這在無法注入 JavaScript 的情況下渲染 URL 時特別有用。 將 JavaScript 程式碼指派給渲染選項的 BeforeRendering 屬性。 結合非同步 PDF 生成功能，以處理多份文件。

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// JavaScript code
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

pdf.SaveAs("executed_js.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' JavaScript code
renderer.RenderingOptions.Javascript = "
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")

pdf.SaveAs("executed_js.pdf")
$vbLabelText   $csharpLabel

何時該使用自訂 JavaScript 注入？

自訂 JavaScript 注入功能適用於渲染 URL 時，當原始 HTML 無法進行修改的情況。 常見用途：

  • 轉換前修改第三方頁面
  • 添加動態浮水印或頁首
  • 依條件隱藏或顯示元素
  • 調整PRINT版面的樣式
  • 內容的提取與重新組織

我可以執行哪些類型的 DOM 操作？

在渲染前修改樣式、新增元素、變更內容，或執行標準的 DOM 操作。 範例：

  • 變更 CSS 屬性以進行 PRINT 格式設定
  • 移除導覽元素或廣告
  • 添加頁碼或自訂頁首
  • 重新調整內容版面配置
  • 插入額外資料或元資料

如何在 PDF 生成過程中擷取 JavaScript 控制台訊息？

IronPDF 可擷取 JavaScript 控制台訊息，包括錯誤日誌和自訂訊息。 請使用 ConsoleListener 屬性來擷取訊息。 此範例展示如何記錄自訂文字與錯誤。

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs
using IronPdf;
using System;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
// Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// Error will be logged
// message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render HTML to PDF
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
Imports IronPdf
Imports System

Private renderer As New ChromePdfRenderer()

' Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
' Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

'--------------------------------------------------//
' Error will be logged
' message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

' Render HTML to PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
$vbLabelText   $csharpLabel

顯示 TypeError: Cannot read properties of null (reading 'style') 的除錯主控台畫面，附帶主控台輸出

為什麼我應該監控 JavaScript 控制台訊息？

主控台監控有助於除錯 JavaScript 錯誤，並在 PDF 生成過程中追蹤執行狀況。 適用於：

  • 識別導致無法渲染的 JavaScript 錯誤
  • 追蹤複雜的 JavaScript 操作進度
  • 除錯非同步程式碼的時序問題
  • 驗證自訂 JavaScript 執行
  • 收集 JavaScript 效能指標

可以擷取哪些類型的訊息？

此監聽器會擷取自訂的 console.log 訊息及 JavaScript 錯誤，包括：

  • 主控台輸出：error()
  • 未捕獲的例外狀況與執行時錯誤
  • 因資源存取失敗所導致的網路錯誤
  • 瀏覽器引擎淘汰警告
  • 自訂除錯資訊

如何使用 D3.js 等 JavaScript 函式庫製作圖表？

D3.js 與 IronPDF 搭配使用，可有效製作圖表或圖像。 D3.js（Data-Driven Documents）是一款 JavaScript 函式庫，用於透過 HTML5 和 CSS3 中的 SVG 技術，實現動態且互動式的資料視覺化。如需更多圖表函式庫範例，請參閱我們關於在 PDF 中渲染圖表的指南。

要建立 D3.js 圖表並將其轉換為 PDF：

  • 建立一個 renderer 物件
  • 設定 JavaScript 和 CSS 屬性
  • 使用 HtmlToPdf 來讀取 HTML
  • 儲存為 PDF
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs
using IronPdf;

string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Export PDF
pdfJavaScript.SaveAs("renderChart.pdf");
Imports IronPdf

Private html As String = "
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

' Export PDF
pdfJavaScript.SaveAs("renderChart.pdf")
$vbLabelText   $csharpLabel

EnableJavaScript
WaitFor
WaitFor.JavaScript
window.ironpdf.notifyRender()
WaitFor.JavaScript
JavaScript
JavaScript
JavaScriptMessageListener
RenderHTMLFileAsPdf
WaitFor.NetworkIdle()
window.ironpdf.notifyRender()

哪些圖表函式庫最適合與 IronPDF 搭配使用？

與 IronPDF 相容的 JavaScript 圖表庫：

  • Chart.js：輕量級基礎圖表庫
  • Highcharts：具備自訂功能的Professional圖表
  • D3.js：為視覺化提供最大彈性
  • C3.js：基於 D3 的可重複使用圖表庫
  • ApexCharts：兼具效能的現代化圖表

要成功執行此操作，必須在生成 PDF 之前完成圖表渲染，並採用適當的等待策略。

何時應調整圖表渲染的等待時間？

包含動畫或大型資料集的複雜圖表需要更長的等待時間。 請注意：

  • 資料量會影響處理時間
  • 動畫播放時間必須完整
  • 針對非同步資料的網路請求
  • 圖表複雜度會增加處理時間

如何排除圖表渲染問題？

請參閱《如何使用 WaitFor 類別延遲 C# PDF 渲染》以獲取更多 WaitFor 選項。 疑難排解步驟：

  1. 增加 JavaScript 等待時間
  2. 使用 HtmlToPdfAsync 進行非同步載入
  3. 停用 PDF 輸出的動畫效果
  4. 檢查主控台是否有 JavaScript 錯誤
  5. 先在瀏覽器中測試 HTML

如何將 AngularJS 應用程式轉換為 PDF？

AngularJS 是一個基於 JavaScript 的開源前端框架。 它透過使用前端 MVC 和 MVVM 架構，簡化單頁應用程式的開發。 詳情請參閱我們的 Angular 轉 PDF 程式碼範例。

為確保相容性，請搭配 Angular Universal 使用伺服器端渲染 (SSR)。 單頁應用程式 (SPAs) 因初始載入後會產生動態內容，故需特別處理。

伺服器端渲染為何對 Angular PDF 至關重要？

由於瀏覽器對 JavaScript 的依賴，若未啟用伺服器端渲染（SSR），前端 Angular 可能無法正確渲染。 挑戰：

  • 包含動態內容的簡易初始 HTML
  • 非靜態 HTML 的前端路由
  • 頁面載入後的資料綁定
  • 在生成 PDF 之前，API 呼叫尚未完成

前端 Angular 有哪些限制？

若未進行適當的等待設定，初始載入後的動態內容可能無法被擷取。 限制：

  • 異步載入的元件
  • 延遲載入的模組與路由
  • 動畫與轉場效果
  • 動態表單與互動功能
  • 即時資料更新

請在您的 Angular 應用程式中使用較長的等待時間，或實作 NotifyRender。

Angular Universal 的伺服器端渲染如何運作？

Angular 與 Angular Universal 之間有何差異？

Angular 在瀏覽器端執行，並根據使用者操作在 DOM 中渲染頁面。 Angular Universal 在伺服器端執行，並在客戶端生成靜態頁面。 這能提升載入速度，並在實現完整互動功能前預覽版面配置。

PDF 生成差異：

  • Angular：需執行 JavaScript
  • Angular Universal：提供預渲染的 HTML
  • 效能：Universal 的渲染速度更快
  • 可靠性：Universal 確保內容的可用性

何時應選擇 Angular Universal 來生成 PDF？

使用 Angular Universal 可確保動態內容渲染，且無需依賴客戶端 JavaScript。 適用於：

  • 包含 API 資料的報告
  • 需保持格式一致的文件
  • 大量 PDF 生成
  • 複雜的 Angular 應用程式
  • JavaScript 執行超時相關問題

Angular Universal 確保在 IronPDF 轉換前完成伺服器端渲染，從而消除時序問題並提升可靠性。

常見問題

在 C# 中將 HTML 轉換為 PDF 時，該如何啟用 JavaScript？

要在 IronPDF 中啟用 JavaScript，請在渲染選項中將 EnableJavaScript 屬性設為 true：new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }。此設定可讓 IronPDF 的 Chromium 引擎在轉換過程中執行 JavaScript。

哪些 JavaScript 函式庫支援 PDF 轉換？

IronPDF 透過其 Chromium 渲染引擎，支援所有 JavaScript 函式庫，包括 jQuery、React、Vue.js 及 Angular。該函式庫能像現代網頁瀏覽器一樣，處理 DOM 操作、AJAX 請求以及動態內容生成。

在生成 PDF/A 時，該如何處理 JavaScript 的執行時機？

請使用 IronPDF 渲染選項中的 WaitFor 類別來控制 JavaScript 的執行時機。您可以搭配最大等待時間（例如 500 毫秒）使用 WaitFor.JavaScript()，以確保在生成 PDF 之前 JavaScript 已執行完畢：WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500)。

在 HTML 轉 PDF 的過程中，我可以執行自訂的 JavaScript 程式碼嗎？

是的，IronPDF 允許您在轉換過程中於 .NET C# 應用程式內執行自訂 JavaScript 程式碼。您可以將 JavaScript 直接注入 HTML 字串中，或透過渲染選項來執行自訂腳本。

如何在 PDF 渲染過程中擷取 JavaScript 控制台訊息？

IronPDF 提供 JavaScript 訊息監聽器功能，讓您能在 PDF 渲染過程中擷取 console.log 訊息及其他 JavaScript 輸出內容。此功能對於除錯 JavaScript 執行非常有用。

該函式庫使用哪種渲染引擎來支援 JavaScript？

IronPDF 採用 Chromium 渲染引擎，此引擎亦為 Google Chrome 的核心驅動引擎。這確保了完整的 JavaScript 相容性，並能在您的 PDF 文件中精準呈現現代網路技術。

是否有提供免費試用版，以便測試 JavaScript 轉 PDF/A 功能？

是的，IronPDF 提供包含完整 JavaScript 支援的免費試用版。您可以在購買授權前測試所有功能，包括 JavaScript 執行、jQuery 渲染以及動態內容生成。

Curtis Chau
Curtis Chau
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。