如何使用JavaScript與HTML轉換為PDF

Translated

View the article in English

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

IronPDF 透過Chromium在這篇文章中，我們將展示如何在 .NET C# 項目中使用 JavaScript 和 jQuery 進行 HTML 轉 PDF 的轉換。 IronPDF 提供一個IronPDF 免費試用探索用。

開始使用 IronPDF

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

第一步：

如何使用 JavaScript 與 HTML 轉成 PDF

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

渲染JavaScript範例

將 HTML 轉換為 PDF 時，支持 HTML 中的 JavaScript 功能。由於渲染發生時沒有延遲，JavaScript 可能無法正確執行。在大多數情況下，建議配置渲染選項中的WaitFor類別允許 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始終100％兼容。這主要是由於分配給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 的開源前端網頁框架，主要由 Google 及一個由個人和企業組成的社群維護，旨在解決開發單頁應用程序時遇到的許多挑戰。它旨在通過提供客戶端模型-視圖-控制器框架，簡化這類應用程序的開發和測試。(MVC)和模型-視圖-視圖模型(MVVM)架構，以及常用於豐富網絡應用程式的組件。

Angular 應謹慎使用。最好依靠伺服器端渲染(SSR)與 Angular Universal 完全相容。