如何使用 JavaScript 將 HTML 轉換為 PDF
JavaScript 是一種高級、多用途的程式語言,常用於網頁開發。它允許開發人員為網站添加互動和動態功能。另一方面,jQuery 不是一種獨立的程式語言,而是一個 JavaScript 函式庫。它旨在簡化 JavaScript 中的常見任務,如 DOM 操作、事件處理和 AJAX 請求。
IronPDF 能夠高效地支持 JavaScript 通過 Chromium 渲染引擎。在本文中,我們將演示如何在 .NET C# 專案中使用 JavaScript 和 jQuery 進行 HTML 到 PDF 的轉換。IronPDF 提供 免費試用.
如何使用 JavaScript 與 HTML 轉成 PDF
立即開始在您的專案中使用IronPDF,並享受免費試用。
查看 IronPDF 上 Nuget 快速安裝和部署。已被下載超過800萬次,它正用C#改變PDF。
Install-Package IronPdf
請考慮安裝 IronPDF DLL 直接下載並手動安裝到您的專案或GAC表單: IronPdf.zip
手動安裝到您的項目中
下載DLL渲染 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")
一些非常複雜的 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")
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>")
使用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")
輸出 PDF
探索更多 WaitFor 選項,例如用於字體、JavaScript、HTML 元素和網路空閒的選項,請訪問 '如何使用 WaitFor 類別延遲 C# PDF 渲染.'
Angular JS HTML 轉換為 PDF
根據維基百科:
*AngularJS 是一個基於 JavaScript 的開源前端 Web 框架,主要由 Google 和一個由個人和公司組成的社群維護,旨在解決開發單頁應用程式時遇到的許多挑戰。它的目標是通過提供一個客戶端模型-視圖-控制器的框架,來簡化這類應用程式的開發和測試。 (MVC) 和模型-視圖-視圖模型 (MVVM) 架構以及經常用於豐富的網路應用程式的組件。
然而,應謹慎使用Angular。最好依賴伺服器端渲染。 (SSR) 與 Angular Universal 完全相容。
使用 Angular Universal 進行伺服器端渲染 (SSR)
Angular vs. Angular Universal
典型的 Angular 應用程式在瀏覽器中運行 (客戶端)它在 DOM 中渲染頁面 (文件物件模型) 根據用戶操作。
Angular Universal在服務器上運行 (伺服器端)它生成靜態頁面,然後在客戶端進行引導。這樣可以更快地渲染 Angular 應用程式。(s) 並允許用戶在應用程序完全互動之前查看其佈局。