1. IronPDF
  2. ハウツー
  3. JavaScript（カスタムレンダリングの遅延）
C#でHTMLからPDFにJava Scriptを使用する方法

HTMLからPDFへC#でJavaScriptを使用する方法

カーティス・チャウ
カーティス・チャウ
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDFはChromiumレンダリングエンジンを使ってHTMLからPDFへの変換時にJavaScriptの実行を可能にします。インタラクティブ要素とダイナミックレンダリングをサポートする.NET C#アプリケーションで、JavaScriptとjQueryを含むダイナミックなWebコンテンツをPDFドキュメントに変換します。

JavaScriptは、ウェブ開発で使用される高レベルで汎用性の高いプログラミング言語です。 ウェブサイト上でインタラクティブでダイナミックな機能を実現します。 jQueryは、DOM操作、イベント処理、AJAXリクエストなどの一般的なタスクを簡素化するJavaScriptライブラリです。

IronPDFはChromiumレンダリングエンジンを通してJavaScriptをサポートしています。この記事では.NET C#プロジェクトのHTMLからPDFへの変換でJavaScriptとjQueryを使用する方法を示します。 IronPDFはテスト用にIronPDFの無料トライアルを提供しています。 変換前のHTMLのデバッグについては、ChromeでHTMLをデバッグするのガイドをご覧ください。

クイックスタート: .NETでJavaScriptを使用して HTML を PDF に変換する

.NETプロジェクトでIronPDFを使用してJavaScriptを含むHTMLページをPDFに変換します。 Chromiumレンダリングエンジンのサポートにより、すべて for JavaScript要素が正確に処理されます。 この例では、動的コンテンツを持つWebページをPDFにレンダリングする方法を示します。 1回のメソッド呼び出しで、PDF文書をレンダリングして保存します。

  1. IronPDF をNuGetパッケージマネージャでインストール

    PM > Install-Package IronPdf

  2. このコード スニペットをコピーして実行します。

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.pdf");

  3. 実際の環境でテストするためにデプロイする

    今日プロジェクトで IronPDF を使い始めましょう無料トライアル

    arrow pointer

基本的なワークフローはどのように設定しますか?

  1. C#ライブラリをダウンロード: HTMLをPDFに変換
  2. EnableJavaScript プロパティ
  3. RenderFromHtmlToPdf: JavaScript コードがサポートされていることを確認する
  4. カスタムJavaScriptを実行する: .NET C#コード内で
  5. コンソールメッセージをキャプチャする: JavaScriptメッセージリスナーを使用して

HTMLをPDFに変換するときにJavaScriptをレンダリングするには?

HTML for JavaScriptは、PDFに変換する際にサポートされます。 レンダリングは即座に行われるため、JavaScriptが正しく実行されない可能性があります。 レンダリングオプションで RenderingOptions クラスを設定し、JavaScript の実行時間を確保してください。以下のコードでは、最大待機時間を 500 ミリ秒に設定して WaitFor を使用しています。待機時間とレンダリング遅延の詳細については、WaitFor を使用して PDF/A レンダリングを遅延させる方法に関するガイドを参照してください。

WaitFor
WaitFor

JavaScriptの実行でWaitForが重要なのはなぜですか?

.NETではJavaScriptの実行メモリが限られているため、複雑なJavaScriptフレームワークではメモリ割り当ての調整が必要になる場合があります。 RenderingOptions は、PDF 生成前に JavaScript の実行を確実に完了させるためのオプションを提供します。 JavaScriptの実行待ち、ネットワークのアイドル状態、HTML要素、またはカスタムレンダリングの遅延。 PDF 生成を最適化するために利用可能な レンダリング オプションについて学んでください。

notifyRender メソッドはいつ使用すべきですか？

notifyRender メソッドは、JavaScriptの実行が完了したことを示し、動的コンテンツの適切なレンダリングタイミングを保証します。 PDF生成前に完了しなければならない非同期操作やアニメーションに使用してください。 このメソッドは、正確なレンダリング制御を行うための notifySettings 設定に対応しています。

CustomJavaScript
InjectJavaScript
CaptureConsoleMessages

一般的な JavaScript レンダリングの問題は何ですか?

複雑なフレームワークの場合、追加の待ち時間やメモリ割り当てが必要になることがあります。 一般的な問題には次のものが含まれます：

  • 非同期データがレンダリング前に読み込まれない
  • CSSアニメーションを途中でキャプチャ
  • レンダリングを妨げるJavaScriptエラー
  • 重いフレームワークによるメモリ制約

トラブルシューティングのために、カスタムロギングを有効にして、レンダリングプロセスの詳細をキャプチャしてください。

PDFレンダリングの前にカスタムJavaScriptを実行するにはどうすればよいですか?

レンダリングオプションの CustomJavaScript プロパティを使用すると、レンダリング前にカスタム JavaScript を実行できます。 これは、JavaScriptインジェクションが不可能なURLをレンダリングする際に役立ちます。 レンダリングオプションの BeforeRendering プロパティに JavaScript コードを割り当てます。 複数のドキュメントを処理するために、asyncPDF生成と組み合わせてください。

: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")
$vbLabelText   $csharpLabel

カスタム JavaScript インジェクションはいつ使うべきですか?

カスタムJavaScriptインジェクションは、ソースHTMLの修正が不可能なURLをレンダリングする際に機能します。 一般的な用途

  • 変換前にサードパーティのページを修正する
  • 動的な透かしやヘッダーの追加
  • 条件付きで要素を非表示または表示する
  • 印刷レイアウトのスタイル調整
  • コンテンツの抽出と再編成

どのような種類の DOM 操作を実行できますか?

スタイルの変更、要素の追加、コンテンツの変更、レンダリング前の標準的な DOM 操作を行います。 例

  • 印刷フォーマット用のCSSプロパティの変更
  • ナビゲーション要素や広告の削除
  • ページ番号またはカスタムヘッダの追加
  • コンテンツレイアウトの再構築
  • 追加データやメタデータの挿入

PDF生成中にJavaScriptのコンソールメッセージをキャプチャするには?

IronPDFはエラーログやカスタムメッセージを含むJavaScriptのコンソールメッセージをキャプチャします。 メッセージをキャプチャするには、ConsoleListener プロパティを使用してください。 この例では、カスタムテキストとエラーをロギングしています。

: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>")
$vbLabelText   $csharpLabel

コンソール出力と共に

なぜ JavaScript のコンソール メッセージを監視する必要があるのですか?

コンソール監視は、JavaScriptエラーのデバッグとPDF生成中の実行追跡に役立ちます。 必須

  • レンダリングを妨げるJavaScriptエラーの特定
  • 複雑なJavaScript操作の進行状況の追跡
  • 非同期コードのタイミング問題のデバッグ
  • カスタムJavaScript実行の検証
  • JavaScriptパフォーマンスメトリクスの収集

どのようなメッセージをキャプチャできますか?

リスナーは、次のようなカスタム console.log メッセージや JavaScript エラーを捕捉します：

  • コンソール出力: log(), info(), warn(), error()
  • 捕捉されない例外と実行時エラー
  • 失敗したリソースからのネットワークエラー
  • ブラウザエンジンの非推奨警告
  • カスタムデバッグ情報

D3.jsのようなJavaScriptライブラリでチャートを作成するにはどうすればよいですか?

D3.jsはIronPDFでチャートや画像を作成するのに適しています。 D3.js（データ駆動型ドキュメント）は、SVGを使用し、HTML5とCSS3で、動的でインタラクティブなデータ視覚化のため for JavaScriptライブラリです。チャートライブラリの例については、PDFでチャートを描画するガイドをご覧ください。

D3.jsチャートを作成し、PDFに変換する：

  • renderer オブジェクトを作成する
  • JavaScriptおよびCSSプロパティを設定する
  • HTMLを読み込むには HtmlToPdf を使用してください
  • 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")
$vbLabelText   $csharpLabel

EnableJavaScript
WaitFor
WaitFor.JavaScript
window.ironpdf.notifyRender()
WaitFor.JavaScript
JavaScript
JavaScript
JavaScriptMessageListener
RenderHTMLFileAsPdf
WaitFor.NetworkIdle()
window.ironpdf.notifyRender()

どのチャートライブラリがIronPDFに最適ですか?

IronPDFと互換性のあるJavaScriptチャートライブラリ：

  • Chart.js：基本的なチャートのための軽量
  • Highcharts：カスタマイズ可能なプロフェッショナルチャート
  • D3.js：ビジュアライゼーションのための最大限の柔軟性
  • C3.js：D3ベースの再利用可能なチャート
  • ApexCharts：パフォーマンスを備えたモダンチャート

翻訳を成功させるには、適切な待機ストラテジーを使用して、PDF生成前にチャートレンダリングを完了させる必要があります。

チャートレンダリングの待ち時間はいつ調整すべきですか?

アニメーションや大きなデータセットを含む複雑なチャートは、より長い待ち時間が必要です。 ご考慮ください：

  • データボリュームが処理時間に影響を与える
  • アニメーションの持続時間を完了する必要があります
  • 非同期データのためのネットワークリクエスト
  • チャートの複雑さが処理を増加させる

チャート レンダリングの問題をトラブルシューティングするにはどうすればよいですか?

その他のオプションについては、"WaitFor クラスを使用して C# の PDF レンダリングを遅延させる方法"を参照してください。 トラブルシューティングの手順

  1. JavaScriptの待機時間を増やす
  2. 非同期読み込みには HtmlToPdfAsync を使用してください
  3. PDF出力のためにアニメーションを無効にする
  4. JavaScriptエラーについてコンソールを確認する 5.まずブラウザでHTMLをテストしてください

AngularJSアプリケーションをPDFに変換するにはどうすればよいですか?

AngularJSはJavaScriptベースのオープンソースのフロントエンドフレームワークです。 クライアントサイドMVCおよびMVVMアーキテクチャを使用したシングルページのアプリケーション開発を簡素化します。 詳しくはAngular to PDFコード例をご覧ください。

互換性のため、Angular Universalでサーバーサイドレンダリング（SSR）を使用してください。 シングルページアプリケーション（SPA）は、初期ロード後に動的なコンテンツが生成されるため、特別な処理が必要です。

なぜAngular PDFにとってサーバーサイドレンダリングが重要なのか

ブラウザ for JavaScript依存のため、クライアントサイドのAngularはSSRなしでは正しくレンダリングされない可能性があります。 課題

– 動的コンテンツを持つ最小限の初期HTML – 静的HTMLでのクライアントサイドルーティングではありません – ページロード後のデータバインディング

  • PDF生成前の不完全なAPIコール

クライアントサイドAngularの限界は何ですか

初期ロード後の動的コンテンツは、適切な待機設定がないとキャプチャできない場合があります。 制限事項

– 非同期で読み込まれるコンポーネント – 遅延読み込みされたモジュールとルート – アニメーションとトランジション – 動的なフォームとインタラクション – リアルタイムのデータ更新

Angularアプリケーションでは、待機時間を長くするか、NotifyRenderを実装してください。

サーバーサイドレンダリングはAngular Universalでどのように機能しますか?

AngularとAngular Universalの違いは何ですか?

Angularはブラウザのクライアントサイドで動作し、ユーザーのアクションに基づいてDOMにページをレンダリングします。 Angular Universalはサーバーサイドで動作し、クライアント上でブートストラップされた静的ページを生成します。 これにより、読み込みが改善され、完全なインタラクティブ機能の前にレイアウトを表示できるようになります。

PDF生成の違い：

– Angular: JavaScriptの実行が必要です – Angular Universal: 事前レンダリングされたHTMLを提供します – パフォーマンス: Universalはより速くレンダリングします

  • 信頼性：ユニバーサルは、コンテンツの可用性を保証します。

PDF生成にAngular Universalを選ぶべきときは？

クライアントサイド for JavaScriptに依存することなく、動的なコンテンツレンダリングを保証するAngular Universalを使用してください。 最適な用途:

– APIデータを使用したレポート – 一貫した書式の必要な文書 – 大量のPDF生成 – 複雑なAngularアプリケーション – JavaScriptの実行タイムアウトの懸念

AngularユニバーサルはIronPDF変換前のサーバーサイドレンダリングを保証し、タイミングの問題を排除し、信頼性を向上させます。

よくある質問

C# で HTML を PDF へ変換す る 際、 JavaScript を有効にす る には ど う し ますか？

IronPDFでJavaScriptを有効にするには、レンダリングオプションでEnableJavaScriptプロパティをtrueに設定します: new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true }.}.これによりIronPDFのChromiumエンジンが変換処理中にJavaScriptを実行できるようになります。

PDF変換に対応しているJavaScriptライブラリは？

IronPDFはChromiumレンダリングエンジンを通してjQuery、React、Vue.js、Angularを含む全て for JavaScriptライブラリをサポートしています。このライブラリは最新のウェブブラウザのようにDOM操作、AJAXリクエスト、動的コンテンツ生成を処理することができます。

PDF生成でJavaScriptの実行タイミングをどのように扱えばよいですか？

IronPDFのレンダリングオプションにあるWaitForクラスを使ってJavaScriptの実行タイミングを制御してください。WaitFor.JavaScript()を最大待ち時間(例えば500ms)で使用することで、PDF生成前にJavaScriptが完了するようにすることができます：WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500)。

HTMLからPDFへの変換中にカスタムJavaScriptコードを実行できますか？

はい、IronPDFは変換プロセス中に.NET C#アプリケーション内でカスタムJavaScriptコードを実行することができます。HTML文字列に直接JavaScriptを注入したり、レンダリングオプションを使ってカスタムスクリプトを実行することができます。

PDFレンダリング中にJavaScriptのコンソールメッセージをキャプチャするには？

IronPDFはJavaScriptメッセージリスナー機能を提供し、PDFレンダリングプロセス中にconsole.logメッセージやその他 for JavaScript出力をキャプチャすることができます。これはJavaScript実行のデバッグに便利です。

JavaScriptのサポートに使用するレンダリングエンジンは何ですか？

IronPDFはGoogle Chromeと同じChromeレンダリングエンジンを使用しています。これにより、JavaScriptとの完全な互換性が保証され、PDFドキュメントに最新のウェブ技術を正確にレンダリングすることができます。

JavaScriptからPDFへの変換をテストするための無料トライアルはありますか？

はい、IronPDFはJavaScriptのフルサポートを含む無料トライアルを提供しています。ライセンスを購入する前に、JavaScriptの実行、jQueryレンダリング、動的コンテンツ生成を含むすべての機能を試すことができます。

カーティス・チャウ
カーティス・チャウ
  今すぐエンジニアリングチームとチャット
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？
Nuget ダウンロード 19,014,616 | バージョン: 2026.5 just released
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package IronPdf
サンプルを実行するHTML が PDF に変換されるのを確認します。