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#專案中使用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. EnableJavaScript屬性
  3. RenderFromHtmlToPdf：確保支援JavaScript程式碼
  4. 執行自定義JavaScript：在您的.NET C#程式碼內
  5. 擷取控制台訊息：使用JavaScript訊息監聽器

我如何在將HTML轉換為PDF時渲染JavaScript?

在進行PDF轉換時支持HTML中的JavaScript。 由於渲染是立即發生的，JavaScript可能無法正確執行。 配置渲染選項中的WaitFor，最大等待時間為500 ms。關於等待時間和渲染延遲的詳細資訊，請參閱我們的使用WaitFor延遲PDF渲染指南。

WaitFor
WaitFor

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

由於.NET中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注入在渲染無法修改源HTML的URL時有效。 常見用途：

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

我可以執行哪些型別的DOM操作?

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

  • 更改CSS屬性以進行列印格式化
  • 移除導航元素或廣告
  • 新增頁碼或自定義標題
  • 重構內容佈局
  • 注入附加資料或元資料

我如何在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錯誤，包括：

  • 控制台輸出：log(), info(), warn(), error()
  • 未捕獲的異常和運行時錯誤
  • 來自失敗資源的網路錯誤
  • 瀏覽器引擎淘汰警告
  • 自定義除錯訊息
Icon Quote related to 可以擷取哪些型別的訊息?

我最喜歡的程式庫是IronPDF。它允許快速高效地操作PDF文件。它還有許多有價值的功能，例如導出到PDF/A格式和數位簽署PDF文件。

Milan Jovanovic related to 可以擷取哪些型別的訊息?

Milan Jovanovic

Microsoft MVP

查看案例研究
Icon Quote related to 可以擷取哪些型別的訊息?

IronOCR意味著我們每年可以從手動處理中節省$40,000，同時提高生產力，釋放資源以進行高影響的任務。我會強烈推薦它。

Brent Matzelle related to 可以擷取哪些型別的訊息?

Brent Matzelle

首席技術官，OPYN

查看案例研究
Icon Quote related to 可以擷取哪些型別的訊息?

IronSuite在我們的運營中扮演著至關重要的角色。這些工具增加了包括建立平面圖和改善庫存管理在內的業務效率。

David Jones related to 可以擷取哪些型別的訊息?

David Jones

首席軟體工程師，Agorus Build

查看案例研究

如何使用JavaScript程式庫如D3.js來建立圖表?

D3.js與IronPDF搭配使用效果良好，用於建立圖表或圖片。 D3.js(Data-Driven Documents)是一個JavaScript程式庫，用於使用SVG在HTML5和CSS3中進行動態、交互式資料可視化。欲了解更多圖表程式庫範例，請參閱我們的將圖表渲染到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最佳搭配?

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

  • Chart.js：適用於基本圖表的輕量級程式庫
  • Highcharts：具客製化功能的專業圖表
  • 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程式碼範例以獲取詳細資訊。

為了相容性，請使用伺服器端渲染（SSR）配合Angular Universal。 由於動態內容在初始載入後生成，單頁應用程式（SPAs）需要特別處理。

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

如果沒有SSR，客戶端Angular可能無法正確渲染，因為依賴於瀏覽器的JavaScript。 挑戰：

  • 最小的初始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大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

準備開始了嗎？
Nuget 下載 19,936,792 | 版本： 2026.7 剛剛發布
Still Scrolling Icon

還在捲動嗎？

想快速獲得證明嗎？ PM > Install-Package IronPdf
執行範例 看您的HTML變成PDF。