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

如何使用 JavaScript 在 C# 中将 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.启用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 框架可能需要调整内存分配。 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

调试控制台显示 TypeError：无法读取 null 的属性(读取

为什么要监控 JavaScript 控制台消息？

控制台监控有助于调试 JavaScript 错误并跟踪 PDF 生成过程中的执行情况。 必不可少：

  • 识别阻止渲染的 JavaScript 错误
  • 跟踪复杂的 JavaScript 操作进度
  • 调试异步代码时序问题
  • 验证自定义 JavaScript 的执行
  • 收集 JavaScript 性能指标

可以捕获哪些类型的消息？

监听器可捕捉自定义的控制台日志信息和 JavaScript 错误，包括

  • 控制台输出：log()、info()、warn()、error()
  • 未捕获异常和运行时错误
  • 来自失败资源的网络错误
  • 浏览器引擎报废警告
  • 自定义调试信息

如何使用 JavaScript 库(如 D3.js)创建图表？

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 等待时间

  1. 使用 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通用：提供预渲染的 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 渲染过程中捕获 console.log 消息和其他 JavaScript 输出。这对于调试 JavaScript 的执行非常有用。

该库使用什么渲染引擎来支持 JavaScript？

IronPDF 使用与 Google Chrome 浏览器相同的 Chrome 渲染引擎。这确保了在 PDF 文档中完全兼容 JavaScript 并准确呈现现代网络技术。

是否有免费试用版用于测试 JavaScript 到 PDF 的转换？

是的，IronPDF 提供免费试用版，其中包括对 JavaScript 的全面支持。您可以在购买许可证之前测试所有功能，包括 JavaScript 执行、jQuery 渲染和动态内容生成。

Curtis Chau
Curtis Chau
  立即与工程团队聊天
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位，专注于前端开发，精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面，喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外，Curtis 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

准备开始了吗？
Nuget 下载 17,803,474 | 版本: 2026.3 刚刚发布
Still Scrolling Icon

还在滚动吗？

想快速获得证据？ PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。