如何使用 JavaScript 将 HTML 转换为 PDF
This article was translated from English: Does it need improvement?
TranslatedView the article in English
JavaScript 是一种高级、通用的编程语言，常用于网页开发。另一方面，jQuery 并不是一种独立的编程语言，而是一个 JavaScript 库。它旨在简化 JavaScript 中的常见任务，如 DOM 操作、事件处理和 AJAX 请求。
IronPDF 通过 铬 渲染引擎。在本文中，我们将演示如何在 .NET C# 项目中使用 JavaScript 和 jQuery 将 HTML 转换为 PDF。IronPDF 提供 免费试用.
如何使用 JavaScript 将 HTML 转换为 PDF
开始在您的项目中使用IronPDF，并立即获取免费试用。
查看 IronPDF 上 Nuget 用于快速安装和部署。它有超过800万次下载，正在使用C#改变PDF。
考虑安装 IronPDF DLL 直接。下载并手动安装到您的项目或GAC表单中： IronPdf.zip
渲染 JavaScript 示例
从 HTML 转换为 PDF 时，支持 HTML 中的 JavaScript 功能。由于渲染时没有延迟，JavaScript 可能无法正常执行。在大多数情况下，建议配置 等待 类，以便让 JavaScript 有时间正常执行。在下面的代码中，我使用了 WaitFor.JavaScript 并指定了 500 毫秒的最长等待时间。
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-javascript.csusing 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 框架可能无法 100% 地与 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.csusing 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.csusing 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.csusing 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的开源前端Web框架，主要由谷歌以及个人和企业社区维护，旨在解决开发单页面应用程序时遇到的许多难题。它旨在通过提供客户端模型-视图-控制器框架，简化此类应用程序的开发和测试。 (模型-视图-控制器 (MVC)) 和模型-视图-视图模型 (MVVM) 架构，以及富互联网应用中常用的组件。
不过，在使用 Angular 时应小心谨慎。最好依靠服务器端渲染 (SSR) 与 Angular Universal 完全兼容。
使用 Angular Universal 进行服务器端渲染 (SSR)
Angular vs. Angular Universal
典型的 Angular 应用程序在浏览器中运行 (客户端).它在 DOM 中渲染页面 (文档对象模型) 基于用户操作。
Angular Universal 在服务器上运行 (服务器端).它生成的静态页面随后会在客户端上进行引导。这将加快 Angular 应用程序的渲染速度(s) 并允许用户在完全交互之前查看应用程序布局。
