1. IronPDF
  2. 操作指南
  3. JavaScript (自定义渲染延迟)
如何在 C# 中使用 Java Script 將 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# 專案中使用 JavaScript 與 jQuery 進行 HTML 至 PDF 的轉換。 IronPDF 提供 免費試用 IronPDF 以供測試。 如需在轉換前除錯 HTML，請參閱我們的 使用 Chrome 除錯 HTML 指南。

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

在 .NET 專案中使用 IronPDF 將包含 JavaScript 的 HTML 頁面轉換成 PDF。 有了 Chromium 渲染引擎的支援，所有 JavaScript 元素都能準確處理。 本範例展示如何將具有動態內容的網頁渲染為 PDF。 單一方法呼叫即可渲染並儲存您的 PDF 文件。

Nuget Icon立即開始使用 NuGet 建立 PDF 檔案：

  1. 使用 NuGet 套件管理器安裝 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.啟用 JavaScript 執行：使用 EnableJavaScript 屬性 3.從 HTML 渲染至 PDF：確保 JavaScript 程式碼受到支援 4.執行自訂 JavaScript：在您的 .NET C# 程式碼內 5.擷取控制台訊息：使用 JavaScript 消息監聽器

將 HTML 轉換為 PDF 時，如何渲染 JavaScript？

轉換為 PDF 時支援 HTML 中的 JavaScript。 由於渲染會立即發生，JavaScript 可能無法正常執行。 在呈現選項中設定 WaitFor 類別，以允許 JavaScript 的執行時間。以下程式碼使用 WaitFor.JavaScript 的最大等待時間為 500 毫秒。有關等待時間和渲染延遲的詳細資訊，請參閱我們的 使用 WaitFor 延遲 PDF 渲染的指南。

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

string htmlWithJavaScript = @"<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>";

// 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(htmlWithJavaScript);

// Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf");
$vbLabelText   $csharpLabel

為什麼 WaitFor 對 JavaScript 執行很重要？

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

何時應該使用 notifyRender 方法？

window.IronPdf.notifyRender()方法是 JavaScript 執行完成的信號，可確保動態內容的適當渲染時序。 用於必須在 PDF 生成之前完成的非同步操作或動畫。 該方法可與 WaitFor.JavaScript 設定搭配使用，以進行精確的呈現控制。

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

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

  • 異步資料未在呈現之前載入
  • 在轉換過程中擷取 CSS 動畫
  • JavaScript 錯誤導致無法呈現
  • 重型框架的記憶體限制

為了排除故障，請啟用 自訂記錄，以擷取渲染過程的詳細資訊。

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

使用呈現選項中的 JavaScript 屬性，在呈現之前執行自訂的 JavaScript。 這有助於在無法注入 JavaScript 的情況下呈現 URL。 將 JavaScript 程式碼指定給呈現選項的 JavaScript 屬性。 結合 async 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");
$vbLabelText   $csharpLabel

何時應該使用自訂 JavaScript 注入？

在無法修改 HTML 原始碼的情況下，自訂 JavaScript 注入會在呈現 URL 時起作用。 常見用途：

  • 轉換前修改第三方網頁
  • 新增動態水印或標頭
  • 有條件地隱藏或顯示元素
  • 調整列印版面的樣式
  • 擷取並重組內容

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

在呈現之前修改樣式、新增元素、變更內容或執行標準 DOM 作業。 範例：

  • 變更列印格式的 CSS 屬性
  • 移除導覽元素或廣告
  • 新增頁碼或自訂標題
  • 重整內容排版
  • 注入額外的資料或元資料

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

IronPDF 可擷取 JavaScript 主控台訊息，包括錯誤記錄和自訂訊息。 使用 JavascriptMessageListener 屬性來擷取訊息。 此範例顯示記錄自訂文字和錯誤。

: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>");
$vbLabelText   $csharpLabel

Debug 控制台顯示 TypeError：無法讀取 null 的屬性 (讀取 'style')，並在控制台輸出。

為什麼要監控 JavaScript 主控台訊息？

Console 監控有助於調試 JavaScript 錯誤，並在 PDF 生成過程中追蹤執行情況。 對於

  • 識別阻止呈現的 JavaScript 錯誤
  • 追蹤複雜的 JavaScript 作業進度
  • 調試異步程式碼時序問題
  • 驗證自訂 JavaScript 的執行
  • 收集 JavaScript 效能指標

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

監聽器可擷取自訂的 console.log 訊息和 JavaScript 錯誤，包括

  • 控制台輸出：log()、info()、warn()、error()
  • 未捕捉的異常和運行時錯誤
  • 來自失效資源的網路錯誤
  • 瀏覽器引擎廢棄警告
  • 自訂除錯資訊

如何使用 JavaScript 程式庫（例如 D3.js）建立圖表？

D3.js與 IronPDF 搭配使用，可以很好地創建圖表或圖像。 D3.js (Data-Driven Documents) 是一個 JavaScript 函式庫，可在 HTML5 和 CSS3 中使用 SVG 來實現動態、互動的資料視覺化。請參閱我們的 在 PDF 中渲染圖表指南，以瞭解更多圖表庫範例。

建立 D3.js 圖表並轉換成 PDF：

  • 建立呈現器物件
  • 設定 JavaScript 與 CSS 屬性
  • 使用 RenderHTMLFileAsPdf 讀取 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");
$vbLabelText   $csharpLabel

哪些圖表庫與 IronPDF 搭配使用效果最佳？

與 IronPDF 相容的 JavaScript 圖表程式庫：

  • Chart.js：輕量級的基本圖表
  • Highcharts：具有自訂功能的專業圖表
  • D3.js：可視化的最大彈性
  • C3.js：基於 D3 的可重複使用圖表
  • ApexCharts：具備效能的現代化圖表

成功需要在 PDF 生成之前使用適當的等待策略完成圖表渲染。

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

有動畫或大型資料集的複雜圖表需要較長的等待時間。 請考慮

  • 資料量影響處理時間
  • 動畫時間必須完成
  • 異步資料的網路請求
  • 圖表複雜度增加處理

如何解決圖表渲染問題？

請參閱'如何使用 WaitFor 類別延遲 C# PDF 渲染'以獲得更多 WaitFor 選項。 疑難排解步驟：
1.增加 JavaScript 等待時間 2.使用 WaitFor.NetworkIdle() 進行同步載入 3.停用 PDF 輸出的動畫 4.檢查控制台的 JavaScript 錯誤 5.先在瀏覽器中測試 HTML

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

AngularJS 是基於 JavaScript 的開放原始碼前端框架。 它簡化了使用客戶端 MVC 和 MVVM 架構的單頁應用程式開發。 詳情請參閱我們的 Angular to PDF 程式碼範例。

為了相容性，請使用 Angular Universal 的伺服器端渲染 (SSR)。 單頁應用程式 (SPA) 由於在初始載入後會產生動態內容，因此需要特別處理。

Why Is Server-Side Rendering Important for Angular PDFs?

由於瀏覽器 JavaScript 的依賴性，若沒有 SSR，用戶端 Angular 可能無法正常呈現。 挑戰

  • 具有動態內容的最小初始 HTML
  • 非靜態 HTML 中的用戶端路由
  • 頁面載入後的資料綁定
  • PDF 生成前的 API 調用不完整

使用用戶端 Angular 有哪些限制？

初次載入後的動態內容，如果沒有適當的等待設定，可能無法捕捉。 限制：

  • 異步載入元件
  • Lazy-loaded 模組與路由
  • 動畫與過場
  • 動態表單與互動
  • 即時資料更新

在您的 Angular 應用程式中使用較長的等待時間或實作 window.IronPDF.notifyRender() 。

伺服器端渲染如何使用 Angular Universal？

Angular 和 Angular Universal 之間有何差異？

Angular 在瀏覽器中執行用戶端，根據使用者的動作在 DOM 中呈現網頁。 Angular Universal 在伺服器端執行，在用戶端製作靜態頁面。 這樣可以改善載入，並允許在完全互動之前進行版面檢視。

PDF 生成的差異：

  • Angular：需要執行 JavaScript
  • Angular Universal：提供預先渲染的 HTML
  • 效能：通用渲染速度更快
  • 可靠性：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。

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

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

如何在 PDF 生成中處理 JavaScript 的執行時序？

使用 IronPDF 渲染选项中的 WaitFor 类来控制 JavaScript 的执行时序。您可以使用 WaitFor.JavaScript()，並設定最長等待時間（例如 500ms），以確保 JavaScript 在 PDF 產生之前完成：WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

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

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

如何在 PDF 呈現過程中擷取 JavaScript 主控台訊息？

IronPDF 提供 JavaScript 消息監聽器功能，可讓您在 PDF 渲染過程中捕捉控制台.log 消息和其他 JavaScript 輸出。這對於調試 JavaScript 的執行非常有用。

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

IronPdf 使用 Chrome 渲染引擎，與 Google Chrome 擁有相同的引擎。這可確保 JavaScript 完全相容，並在您的 PDF 文件中準確呈現現代網路技術。

是否有免費試用版可供測試 JavaScript 至 PDF 的轉換？

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

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術撰稿人

Curtis Chau 擁有電腦科學學士學位（卡爾頓大學），專長於前端開發，精通 Node.js、TypeScript、JavaScript 和 React。Curtis 對製作直覺且美觀的使用者介面充滿熱情，他喜歡使用現代化的架構，並製作結構良好且視覺上吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 也有濃厚的興趣，他喜歡探索整合硬體與軟體的創新方式。在空閒時間，他喜歡玩遊戲和建立 Discord bots，將他對技術的熱愛與創意結合。

準備好開始了嗎？
Nuget 下載 17,527,568 | 版本： 2026.2 剛剛發布