1. IronPDF
  2. 操作指南
  3. JavaScript (自定义渲染延迟)
如何在 HTML 到 PDF 使用 C# 中使用 Java Script

How to use JavaScript with HTML to PDF

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

JavaScript 是一種高階且多功能的程式語言，常用於網頁開發。 它允許開發者為網站添加互動性和動態功能。 另一方面，jQuery 並不是一種獨立的程式語言，而是為了簡化 JavaScript 的常見任務，如 DOM 操作、事件處理和 AJAX 請求，而設計的 JavaScript 庫。

IronPDF 透過 Chromium 渲染引擎有效支援 JavaScript。在本文中，我們將展示如何在 .NET C# 專案中將 JavaScript 和 jQuery 用於 HTML 到 PDF 的轉換。 IronPDF 提供IronPDF 的免費試用版供您探索。

快速入門：將含有 JavaScript 的 HTML 轉換為 PDF in .NET)

使用 IronPDF 可以輕鬆地將包含 JavaScript 的 HTML 頁面轉換為 PDF，用於您的 .NET 專案。 憑藉 IronPDF 對 Chromium 渲染引擎的支援，您可以確保所有的 JavaScript 元素都能夠得到準確處理。 這個快速示例展示瞭如何將網頁渲染成 PDF，讓您能夠輕鬆地整合動態內容。 只需一個方法調用就能渲染和保存您的 PDF 文件。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    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. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

as-heading:3(概述：最小化工作流程（5 個步驟）

  1. 下載 C# 庫：將 HTML 轉成 PDF
  2. 啟用 JavaScript 執行：使用 EnableJavaScript 屬性。
  3. 從 HTML 渲染到 PDF：確保您的 JavaScript 代碼得到充分支援。
  4. 執行自訂 JavaScript：在您的 .NET C# 代碼中。
  5. 捕捉控制台消息：使用 JavaScript 消息監聽器。

渲染 JavaScript 範例

從 HTML 轉換為 PDF 時支援 HTML 中的 JavaScript 功能。 由於渲染發生時無延遲，JavaScript 可能無法正確執行。 在大多數情況下，建議在渲染選項中配置 WaitFor 類以允許 JavaScript 有時間正確執行。 在以下代碼中，WaitFor.JavaScript 被用來指定最長等待時間為 500 毫秒。

: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");
Imports IronPdf

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

' 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(htmlWithJavaScript)

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

由於為 JavaScript 執行分配的內存有限，某些非常複雜的 JavaScript 框架可能無法完全與 IronPDF 和 .NET 一起工作。

執行自訂 JavaScript 範例

在渲染選項中使用 JavaScript 屬性來在將 HTML 渲染成 PDF 之前執行自訂 JavaScript。 這在從 URL 渲染時非常實用，當無法植入 JavaScript 代碼時。 只需將 JavaScript 代碼分配給渲染選項的 JavaScript 屬性。

: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 消息監聽器範例

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>");
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

控制台窗口

使用 JavaScript 和 IronPDF 繪製圖表

D3.js 是 IronPDF 的完美選擇，當您想要創建圖表或圖像時。 D3.js, known as Data-Driven Documents, is a JavaScript library for creating dynamic, interactive data visualizations in web browsers using Scalable Vector Graphics (SVG) in HTML5 and Cascading Style Sheets (CSS3).

要使用 D3.js 創建圖表，然後使用 IronPDF 將其轉換為 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");
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

輸出PDF

探索更多 WaitFor 選項，例如字體、JavaScript、HTML 元件、和網路空閒的選項，請訪問'如何使用 WaitFor 類來延遲 C# PDF 渲染。”

AngularJS HTML 轉 PDF

AngularJS 是一個基於 JavaScript 的開源前端網頁框架。 它通過客戶端模型–視圖–控制器 (MVC) 和模型–視圖–視圖模型 (MVVM) 架構簡化了單頁應用程式的開發和測試。

為了完全相容，考慮使用伺服器端渲染 (SSR) 與 Angular Universal 一起使用。

使用 Angular Universal 的伺服器端渲染（SSR）

Angular vs. Angular Universal

典型的 Angular 應用程式在瀏覽器（客戶端）上運行，根據用戶的行動在 DOM（文件對象模型）中渲染頁面。 Angular Universal 在伺服器（伺服器端）上運行，並生成在客戶端上引導的靜態頁面。 這改善了載入時間，並允許用戶在完全互動之前查看佈局。

常見問題解答

如何在 .NET 应用程序中将带有 JavaScript 的 HTML 转换为 PDF？

您可以使用 IronPDF 的 `RenderHtmlAsPdf` 方法，将带有 JavaScript 的 HTML 内容转换为 PDF。通过在渲染选项中启用 JavaScript 执行，可以确保在转换过程中正确处理动态内容。

启用 HTML 到 PDF 转换中 JavaScript 执行需要哪些步骤？

要在 IronPDF 中启用 JavaScript 执行，需在渲染选项中将 `EnableJavaScript` 属性设置为 `true`。这样可以让 PDF 转换过程中处理 HTML 中的 JavaScript。

如何确保我的 JavaScript 代码在将 HTML 转换为 PDF 之前执行？

在 IronPDF 中使用 `WaitFor` 类配置渲染选项并指定 JavaScript 执行的最大等待时间。这可以确保所有脚本在生成 PDF 之前运行，通常情况下设置等待时间为500毫秒。

HTML 到 PDF 转换过程中可以捕获 JavaScript 控制台消息吗？

是的，您可以使用 IronPDF 的 `JavascriptMessageListener` 属性捕获 JavaScript 控制台消息。此功能允许您在 PDF 渲染过程中调试和记录控制台消息。

IronPDF 能渲染用像 D3.js 这样的 JavaScript 库创建的图表吗？

可以，通过在渲染选项中启用 JavaScript 执行，并使用像 `RenderHtmlFileAsPdf` 这样的方法，将包含图标脚本的 HTML 文件转换为 PDF，IronPDF 可以渲染用 D3.js 创建的图表。

使用 JavaScript 和 HTML 到 PDF 转换时有哪些潜在挑战？

由于在 JavaScript 执行过程中内存分配限制，一些复杂的 JavaScript 框架可能会在 IronPDF 上遇到问题。建议测试和优化脚本以确保兼容性。

使用 Angular Universal 的服务器端渲染如何有利于 HTML 到 PDF 的转换？

使用 Angular Universal 进行服务器端渲染可以通过在服务器上预渲染页面来提高性能。这改善了加载时间和兼容性，使 IronPDF 能够有效地将这些页面转换为 PDF。

如何在 .NET 的 HTML 到 PDF 转换过程中执行自定义 JavaScript？

通过在渲染选项中设置 JavaScript 代码于 `JavaScript` 属性，可以执行自定义 JavaScript。这允许在 IronPDF 转换过程中运行脚本。

处理 JavaScript 密集型页面的 PDF 转换有哪些推荐方法？

对于 JavaScript 密集型页面，考虑使用服务器端渲染技术，如 Angular Universal 进行内容预渲染，确保内容在使用 IronPDF 转换之前得到完全处理。这有助于管理性能和内存问题。

IronPDF 如何支持带动态内容的 HTML 转换？

IronPDF 通过利用 Chromium 渲染引擎来支持带动态内容的 HTML 转换。这允许执行 JavaScript 和 jQuery，确保交互元素在 PDF 输出中得到保留。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 16,154,058 | 版本： 2025.11 剛剛發布