JavaScriptを使用してHTMLをPDFに変換する方法
JavaScriptは、Web開発で一般的に使用される高水準で多用途のプログラミング言語です。 開発者は、ウェブサイトにインタラクティブでダイナミックな機能を追加することができます。 一方、jQueryは独立したプログラミング言語ではなく、JavaScriptのライブラリです。 これは、DOM操作、イベント処理、AJAXリクエストなどのJavaScriptにおける一般的なタスクを簡略化するように設計されています。
IronPDF は、Chromium レンダリングエンジンを介して JavaScript を効率的にサポートします。この記事では、.NET C# プロジェクトで HTML から PDF への変換時に JavaScript と jQuery を使用する方法を示します。 IronPDFは、IronPDFの無料トライアルを提供しています。
IronPDFを始めましょう
今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。
HTMLからPDFへの変換にJavaScriptを使用する方法
JavaScriptのレンダリング例
HTMLからPDFへの変換時にJavaScript機能がサポートされます。 レンダリングが遅延なく行われるため、JavaScriptが適切に実行されない可能性があります。 ほとんどの場合、JavaScriptが正しく実行されるようにするために、レンダリングオプションでWaitForクラスを設定することをお勧めします。 次のコードでは、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");非常に複雑な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.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");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>");
JavaScriptとIronPDFを使用したチャーティング
D3.jsは、グラフや画像を作成したいときにIronPDFに最適です。
D3.js、または単にD3とは、Data-Driven Documentsを指します。 これは、ウェブブラウザ内で動的でインタラクティブなデータビジュアライゼーションを作成するための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");PDFを出力
フォント、JavaScript、HTML要素、ネットワークアイドルなどのWaitForオプションを 'C# PDFレンダリングを遅延させるためのWaitForクラスの使い方' でさらに探索してください。
Angular JS HTMLからPDFへ
ウィキペディアによると
*AngularJSは、主にGoogleと個人および企業のコミュニティによって管理されている、JavaScriptベースのオープンソースのフロントエンドWebフレームワークであり、シングルページアプリケーションの開発で遭遇する多くの課題に対処するために作られました。 それは、リッチインターネットアプリケーションで一般的に使用されるコンポーネントと共に、クライアントサイドのモデル・ビュー・コントローラー（MVC）およびモデル・ビュー・ビューモデル（MVVM）アーキテクチャ用のフレームワークを提供することにより、そのようなアプリケーションの開発とテストの両方を簡素化することを目的としています。
ただし、Angularは慎重に使用する必要があります。 完全な互換性のためには、Angular Universal を使用したサーバーサイドレンダリング（SSR）に依存する方が良いです。
サーバーサイドレンダリング（SSR）とAngular Universal
Angular vs. Angular Universal
アンギュラー vs. アンギュラー・ユニバーサル
通常のAngularアプリケーションはブラウザ内で（クライアントサイド）実行されます。 ユーザーの操作に基づいて、DOM（Document Object Model）内でページをレンダリングします。
Angular Universalはサーバー（サーバーサイド）で実行されます。 それはクライアントで後からブートストラップされる静的ページを生成します。 これにより、Angularアプリケーションのレンダリングが高速化され、ユーザーは完全にインタラクティブになる前にアプリケーションのレイアウトを表示することができます。
