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 。它能夠將包含JavaScript和 jQuery 的動態 Web 內容轉換為.NET C# 應用程式中的 PDF 文檔，並支援互動式元素和動態渲染。

JavaScript是一種用於 Web 開發的高階、多功能的程式語言。 它為網站提供互動式和動態功能。 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 文件。

  1. 使用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.啟用JavaScript執行：使用 EnableJavaScript 屬性 3.從 HTML 渲染為 PDF ：確保支援JavaScript程式碼 4.執行自訂JavaScript ：在您的.NET C# 程式碼中 5.擷取控制台訊息：使用JavaScript訊息監聽器

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

將 HTML 轉換為 PDF 時支援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框架可能需要調整記憶體分配。 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 屬性。 結合非同步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 的 URL 渲染過程中，自訂JavaScript注入可以發揮作用。 常見用途：

  • 轉換前修改第三方頁面
  • 新增動態浮水印或標題
  • 有條件地隱藏或顯示元素
  • 調整列印佈局樣式 提取和重組內容

我可以執行哪些類型的 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

調試控制台顯示 TypeError：無法讀取 null 的屬性(讀取

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

控制台監控有助於偵錯JavaScript錯誤並追蹤 PDF 產生過程中的執行情況。 必備：

  • 辨識阻止渲染的JavaScript錯誤
  • 追蹤複雜的JavaScript操作進度
  • 調試非同步程式碼時序問題
  • 驗證自訂JavaScript執行
  • 收集JavaScript效能指標

可以捕獲哪些類型的消息？

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

  • 控制台輸出：log()、info()、warn()、error()
  • 未捕獲的異常和運行時錯誤
  • 資源故障所引起的網路錯誤 瀏覽器引擎棄用警告
  • 自訂偵錯資訊

如何使用D3.js等JavaScript庫建立圖表？

D3.js與IronPDF搭配使用效果很好，可用於建立圖表或影像。 D3.js(資料驅動文件)是一個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 的更多選項，請參閱"如何使用 WaitFor 類別延遲 C# PDF 渲染"。 故障排除步驟：

  1. 增加JavaScript等待時間
  2. 使用 WaitFor.NetworkIdle() 進行非同步加載
  3. 停用 PDF 輸出的動畫
  4. 檢查控制台是否有JavaScript錯誤
  5. 首先在瀏覽器中測試 HTML 程式碼。

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

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

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

為什麼伺服器端渲染對 Angular PDF 很重要？

由於瀏覽器對JavaScript 的依賴，如果沒有 SSR(伺服器端渲染)，客戶端 Angular 可能無法正確渲染。 挑戰：

  • 包含動態內容的極簡初始 HTML
  • 用戶端路由不在靜態 HTML 中
    頁面載入後的資料綁定
    PDF 產生前 API 呼叫未完成

客戶端 Angular 有哪些限制？

如果沒有正確的等待配置，初始載入後的動態內容可能無法擷取。 局限性：

  • 非同步載入的元件
  • 延遲載入的模組和路由
    動畫和轉場
  • 動態形式和交互
  • 即時數據更新

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

Angular Universal 如何實現伺服器端渲染？

Angular 和 Angular Universal 有什麼區別？

Angular 在瀏覽器用戶端運行，根據使用者操作在 DOM 中渲染頁面。 Angular Universal 在伺服器端運行，產生在客戶端啟動的靜態頁面。 這樣可以提高載入速度，並允許在完全互動之前查看佈局。

PDF產生差異：

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

何時應該選擇 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 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 17,803,474 | 版本： 2026.3 剛剛發布
Still Scrolling Icon

還在滾動嗎？

想快速取得證據？ PM > Install-Package IronPdf
運行範例看著你的HTML程式碼變成PDF檔。