JavaScriptを使用してHTMLをPDFに変換する方法

Translated

View the article in English

JavaScriptは、Web開発で一般的に使用される高水準で多用途のプログラミング言語です。開発者は、ウェブサイトにインタラクティブでダイナミックな機能を追加することができます。一方、jQueryは独立したプログラミング言語ではなく、JavaScriptのライブラリです。これは、DOM操作、イベント処理、AJAXリクエストなどのJavaScriptにおける一般的なタスクを簡略化するように設計されています。

IronPDFは、JavaScriptを効率的にサポートしますクロムレンダリングエンジン。この記事では、.NET C#プロジェクトにおけるHTMLからPDFへの変換でJavaScriptやjQueryを使用する方法を示します。 IronPDFは、IronPDFの無料トライアル探検のために。

IronPDFを始めましょう

今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。

最初のステップ:

HTMLからPDFへの変換にJavaScriptを使用する方法

HTMLをPDFに変換するためのC#ライブラリをダウンロード
JavaScriptの実行を有効にする JavaScriptを有効にする プロパティ
JavaScriptコードを完全にサポートしてHTMLからPDFにレンダリング
.NET C#でカスタムJavaScriptコードを実行する
JavaScriptからコンソールメッセージを監視してキャプチャする

JavaScriptのレンダリング例

HTMLからPDFへの変換時に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を出力

フォント、JavaScript、HTML要素、およびネットワークアイドルに関するWaitForオプションの詳細については、こちらをご覧ください:待機クラスを使用してC# PDFレンダリングを遅延させる方法.'

Angular JS HTMLからPDFへ

ウィキペディアによると

*AngularJSは、主にGoogleと個人および企業のコミュニティによって管理されている、JavaScriptベースのオープンソースのフロントエンドWebフレームワークであり、シングルページアプリケーションの開発で遭遇する多くの課題に対処するために作られました。その目的は、クライアントサイドのモデル・ビュー・コントローラーのフレームワークを提供することによって、これらのアプリケーションの開発およびテストを簡素化することです。(MVC)モデル–ビュー–ビューモデル(MVVM)アーキテクチャ、およびリッチインターネットアプリケーションで一般的に使用されるコンポーネント。

ただし、Angularは慎重に使用する必要があります。サーバーサイドレンダリングに依存する方が良い。(SSR)Angular Universalとの完全な互換性があります。

サーバーサイドレンダリング（SSR）とAngular Universal

Angular vs. Angular Universal

アンギュラー vs. アンギュラー・ユニバーサル

通常のAngularアプリケーションはブラウザで動作します。(クライアント側). DOM内のページをレンダリングします(文書オブジェクトモデル)ユーザーの操作に基づいて

Angular Universalはサーバー上で動作します。(サーバーサイド). それはクライアントで後からブートストラップされる静的ページを生成します。これにより、Angularアプリケーションのレンダリングが高速化されます。(s)アプリケーションレイアウトが完全にインタラクティブになる前に、ユーザーがそのレイアウトを確認できるようにします。