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

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是一种高级、多用途的编程语言，通常用于Web开发。 它允许开发人员为网站添加互动和动态功能。 另一方面，jQuery并不是一种独立的编程语言，而是一个JavaScript库，旨在简化JavaScript中的常见任务，如DOM操作、事件处理和AJAX请求。

IronPDF通过Chromium渲染引擎有效支持JavaScript。在本文中，我们将演示如何在.NET C#项目中将JavaScript和jQuery用于HTML到PDF的转换。 IronPDF提供IronPDF的免费试用版供探索。

快速开始：在.NET中将包含JavaScript的HTML转换为PDF)

在.NET项目中，使用IronPDF轻松将包含JavaScript的HTML页面转换为PDF。 凭借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中100%工作。

执行自定义JavaScript示例

渲染选项中的JavaScript属性用于在将HTML渲染为PDF前执行自定义JavaScript。 这在从无法注入JavaScript代码的URL进行渲染时非常有用。 只需将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的开源前端Web框架。 它简化了使用客户端模型–视图–控制器 (MVC) 和模型–视图–视图模型 (MVVM) 架构的单页应用的开发和测试。

为实现完全兼容，考虑结合使用Angular Universal进行服务器端渲染 (SSR)。

使用Angular Universal进行服务器端渲染 (SSR)

Angular与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`等方法，IronPDF可以将包含图表脚本的HTML文件转换为PDF。

在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 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

准备开始了吗？
Nuget 下载 16,154,058 | 版本: 2025.11 刚刚发布