如何使用 JavaScript 将 HTML 转换为 PDF

Translated

View the article in English

JavaScript是一种高级、多用途的编程语言，常用于网页开发。它允许开发者向网站添加交互式和动态功能。 jQuery不是一种单独的编程语言，而是一个JavaScript库。它旨在简化JavaScript中的常见任务，例如DOM操作、事件处理和AJAX请求。

IronPDF通过铬渲染引擎。在本文中，我们将展示如何在 .NET C# 项目中使用 JavaScript 和 jQuery 将 HTML 转换为 PDF。 IronPDF提供免费试用.

如何使用 JavaScript 将 HTML 转换为 PDF

下载将 HTML 转换为 PDF 的 C# 库
使用 启用 JavaScript 属性
使用完全支持的 JavaScript 代码从 HTML 渲染 PDF
在 .NET C# 中执行自定义 JavaScript 代码
监听和捕获 JavaScript 的控制台消息

或

开始在您的项目中使用IronPDF，并立即获取免费试用。

第一步：

免费开始

渲染JavaScript示例

在将 HTML 转换为 PDF 时，支持 HTML 中的 JavaScript 功能。由于渲染发生得非常快，JavaScript 可能无法正确执行。在大多数情况下，建议配置等待在 RenderingOptions 类中，以便正确执行 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")

VB C#

一些非常复杂的JavaScript框架可能并不总是能与IronPDF和.NET完全兼容。这主要是由于为JavaScript执行分配的内存有限。

执行自定义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")

VB C#

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

VB C#

使用 JavaScript 和 IronPDF 进行图表制作

D3.js是IronPDF创建图表或图像的完美选择。

D3.js或者简称D3，代表数据驱动的文件. 这是一个JavaScript库，用于在网页浏览器中创建动态的交互式数据可视化。 D3 使用可缩放矢量图形 SVG于HTML5和层叠样式表(CSS3).

要使用 D3.js 创建图表然后将其转换为PDF文档，请使用类似以下的代码：

创建一个渲染器对象。
设置JavaScript和CSS属性。
使用IronPDF库的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")

VB C#

输出 PDF

探索更多 WaitFor 选项，如字体、JavaScript、HTML 元素和网络空闲的 WaitFor 选项，请访问 "WaitFor"。如何使用 WaitFor 类延迟 C# PDF 渲染.'

Angular JS HTML 转 PDF

据维基百科：

*AngularJS是一个基于JavaScript的开源前端网络框架，主要由Google以及一个由个人和企业组成的社区维护，旨在解决开发单页应用程序时遇到的许多挑战。它旨在通过提供客户端模型-视图-控制器的框架，简化此类应用程序的开发和测试。(模型-视图-控制器 (MVC))和模型-视图-视图模型(MVVM)架构以及常用于富互联网应用程序的组件。

然而，应谨慎使用Angular。最好依靠服务器端渲染。(SSR)与 Angular Universal 完全兼容。

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

Angular对比Angular Universal

一个典型的Angular应用程序在浏览器中运行(客户端). 它在DOM中渲染页面。(文档对象模型)基于用户操作。

Angular Universal 在服务器上运行(服务器端). 它生成静态页面，稍后在客户端上引导这些页面。这使得Angular应用程序的渲染更快(s)并允许用户在完全交互之前查看应用程序布局。

准备开始了吗？版本： 2024.10 刚刚发布

查看许可证 >

如何使用 JavaScript 将 HTML 转换为 PDF

如何使用 JavaScript 将 HTML 转换为 PDF

渲染JavaScript示例

执行自定义JavaScript示例

JavaScript 消息监听器示例

使用 JavaScript 和 IronPDF 进行图表制作

输出 PDF

Angular JS HTML 转 PDF

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

Angular对比Angular Universal

准备开始了吗？版本： 2024.10 刚刚发布

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥立即。

试用表格已提交
成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥立即。

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥立即。

试用表格已提交
成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

如何使用 JavaScript 将 HTML 转换为 PDF

如何使用 JavaScript 将 HTML 转换为 PDF

安装使用 NuGet

下载 DLL

手动安装到你的项目中

安装使用 NuGet

下载 DLL

手动安装到你的项目中

渲染JavaScript示例

执行自定义JavaScript示例

JavaScript 消息监听器示例

使用 JavaScript 和 IronPDF 进行图表制作

输出 PDF

Angular JS HTML 转 PDF

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

Angular对比Angular Universal

准备开始了吗？ 版本： 2024.10 刚刚发布

获取您的免费

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥 立即。

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 30天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

准备开始了吗？版本： 2024.10 刚刚发布

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

获取您的免费 30天试用密钥立即。

试用表格已提交
成功地.

获取您的免费 30天试用密钥立即。

获取您的免费 30天试用密钥立即。

试用表格已提交
成功地.