HTML for JavaScriptは、PDFに変換する際にサポートされます。 レンダリングは即座に行われるため、JavaScriptが正しく実行されない可能性があります。 JavaScript実行時間を許可するためにレンダリングオプションでWaitForを使用します。待機時間とレンダリング遅延の詳細については、PDFレンダリングを遅らせるためのWaitForの使用方法ガイドを参照してください。
WaitFor WaitFor
JavaScriptの実行でWaitForが重要なのはなぜですか?
.NETではJavaScriptの実行メモリが限られているため、複雑なJavaScriptフレームワークではメモリ割り当ての調整が必要になる場合があります。 RenderingOptionsは、PDF生成前に完全なJavaScript実行を保証するオプションを提供します。 JavaScriptの実行待ち、ネットワークのアイドル状態、HTML要素、またはカスタムレンダリングの遅延。 PDF 生成を最適化するために利用可能な レンダリング オプションについて学んでください。
using IronPdf;ChromePdfRenderer renderer = new ChromePdfRenderer();// JavaScript coderenderer.RenderingOptions.Javascript = @"document.querySelectorAll('h1').forEach(function(el){ el.style.color='red';})";// Render HTML to PDFPdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");pdf.SaveAs("executed_js.pdf");
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");
ImportsIronPdfPrivate renderer As New ChromePdfRenderer()' JavaScript coderenderer.RenderingOptions.Javascript = "document.querySelectorAll('h1').forEach(function(el){ el.style.color='red';})"' Render HTML to PDFDim pdf AsPdfDocument = 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")
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 consolerenderer.RenderingOptions.Javascript = "console.log('foo');";// Render HTML to PDFPdfDocument 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 PDFPdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
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>");
ImportsIronPdfImportsSystemPrivate 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 consolerenderer.RenderingOptions.Javascript = "console.log('foo');"' Render HTML to PDFDim pdf AsPdfDocument = 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 PDFDim pdf2 AsPdfDocument = 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 のコンソール メッセージを監視する必要があるのですか?
コンソール監視は、JavaScriptエラーのデバッグとPDF生成中の実行追跡に役立ちます。 必須
レンダリングを妨げるJavaScriptエラーの特定
複雑なJavaScript操作の進行状況の追跡
非同期コードのタイミング問題のデバッグ
カスタムJavaScript実行の検証
JavaScriptパフォーマンスメトリクスの収集
どのようなメッセージをキャプチャできますか?
リスナーはカスタムconsole.logメッセージと以下 for JavaScriptエラーをキャプチャします。
D3.jsはIronPDFでチャートや画像を作成するのに適しています。 D3.js（データ駆動型ドキュメント）は、SVGを使用し、HTML5とCSS3で、動的でインタラクティブなデータ視覚化のため for JavaScriptライブラリです。チャートライブラリの例については、PDFでチャートを描画するガイドをご覧ください。
D3.jsチャートを作成し、PDFに変換する：
rendererオブジェクトを作成
JavaScriptおよびCSSプロパティを設定する
HtmlToPdfを使用してHTMLを読み取ります
PDFで保存
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 Renderervar renderer = new ChromePdfRenderer();// Enable JavaScriptrenderer.RenderingOptions.EnableJavaScript = true;// Set waitFor for JavaScriptrenderer.RenderingOptions.WaitFor.JavaScript(500);// Render HTML contains JavaScriptvar pdfJavaScript = renderer.RenderHtmlAsPdf(html);// Export PDFpdfJavaScript.SaveAs("renderChart.pdf");
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");
ImportsIronPdfPrivate html AsString = "<!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 RendererPrivate renderer = New ChromePdfRenderer()' Enable JavaScriptrenderer.RenderingOptions.EnableJavaScript = True' Set waitFor for JavaScriptrenderer.RenderingOptions.WaitFor.JavaScript(500)' Render HTML contains JavaScriptDim pdfJavaScript = renderer.RenderHtmlAsPdf(html)' Export PDFpdfJavaScript.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")
IronPDFはChromiumレンダリングエンジンを通してjQuery、React、Vue.js、Angularを含む全て for JavaScriptライブラリをサポートしています。このライブラリは最新のウェブブラウザのようにDOM操作、AJAXリクエスト、動的コンテンツ生成を処理することができます。
What JavaScript chart libraries are compatible with IronPDF?
Compatible JavaScript chart libraries with IronPDF include Chart.js, Highcharts, D3.js, C3.js, and ApexCharts. These libraries can be used to create dynamic charts in HTML that are then converted to PDF using IronPDF.
