1. IronPDF
  2. 操作指南
  3. JavaScript（自訂渲染延遲）

如何使用 JavaScript 將 HTML 轉換為 PDF

This article was translated from English: Does it need improvement?
Translated
View the article in English

JavaScript 是一種高級、多用途的程式語言，常用於網頁開發。它允許開發人員為網站添加互動和動態功能。另一方面，jQuery 不是一種獨立的程式語言，而是一個 JavaScript 函式庫。它旨在簡化 JavaScript 中的常見任務，如 DOM 操作、事件處理和 AJAX 請求。

IronPDF 能夠高效地支持 JavaScript 通過 Chromium 渲染引擎。在本文中，我們將演示如何在 .NET C# 專案中使用 JavaScript 和 jQuery 進行 HTML 到 PDF 的轉換。IronPDF 提供 免費試用.

如何使用 JavaScript 與 HTML 轉成 PDF

  1. 下載 C# 程式庫以將 HTML 轉換為 PDF
  2. 啟用 JavaScript 執行與 啟用JavaScript 屬性
  3. 從HTML渲染為PDF，完全支援JavaScript代碼
  4. 在.NET C#中執行自定義JavaScript程式碼
  5. 監聽並捕捉 JavaScript 的控制台訊息

C# NuGet 程式庫用于 PDF

安裝與 NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
或
Java PDF JAR

下載 DLL

下載DLL

手動安裝到您的項目中

C# NuGet 程式庫用于 PDF

安裝與 NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
或
Java PDF JAR

下載 DLL

下載DLL

手動安裝到您的項目中

立即開始在您的專案中使用IronPDF，並享受免費試用。

第一步：
green arrow pointer

查看 IronPDF 上 Nuget 快速安裝和部署。已被下載超過800萬次，它正用C#改變PDF。

C# NuGet 程式庫用于 PDF nuget.org/packages/IronPdf/
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")
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 類別延遲 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) 並允許用戶在應用程序完全互動之前查看其佈局。