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

How to use JavaScript with HTML to PDF

Curtis Chau
Curtis Chau
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

JavaScriptは、ウェブ開発で一般的に使用される高水準で多用途なプログラミング言語です。 ウェブサイトにインタラクティブで動的な機能を追加することができます。 一方、jQueryは別のプログラミング言語ではなく、DOM操作、イベント処理、AJAXリクエストなどのJavaScriptの一般的なタスクを単純化するために設計されたJavaScriptライブラリです。

IronPDFは、Chromiumレンダリングエンジンを介してJavaScriptを効率的にサポートしています。本記事では、.NET C#プロジェクトでHTMLからPDFへの変換にJavaScriptとjQueryを使用する方法を説明します。 IronPDFは無料のIronPDF試用版を提供しており、これを探索できます。

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

IronPDFを使用すると、.NETプロジェクト内でJavaScriptを含むHTMLページを簡単にPDFに変換できます。 IronPDFのChromiumレンダリングエンジンのサポートにより、すべてのJavaScript要素が正確に処理されることを保証します。 このクイック例は、ウェブページをPDFにレンダリングする方法を示しており、動的なコンテンツを容易に統合できます。 PDFドキュメントをレンダリングして保存するには、単一のメソッド呼び出しが必要です。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    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. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

as-heading:3(概要：最小ワークフロー（5ステップ）

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

JavaScriptレンダリング例

HTMLでのJavaScript機能は、HTMLからPDFへの変換時にサポートされています。 レンダリングは遅延なく行われるため、JavaScriptが適切に実行されない可能性があります。 多くの場合、Rendering OptionsでWaitForクラスを設定して、JavaScriptが正しく実行される時間を確保することをお勧めします。 以下のコードではWaitFor.JavaScriptを使用し、最大待ち時間を500msに指定します。

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

非常に複雑なJavaScriptフレームワークの一部は、JavaScript実行に対するメモリの制限があるため、IronPDFと.NETで常に100%動作するとは限りません。

カスタム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")
$vbLabelText   $csharpLabel

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

コンソールウィンドウ

JavaScriptとIronPDFによるチャート作成

D3.jsは、チャートや画像を作成したいときにIronPDFに最適です。 D3.js, known as Data-Driven Documents, is a JavaScript library for creating dynamic, interactive data visualizations in web browsers using Scalable Vector Graphics (SVG) in HTML5 and Cascading Style Sheets (CSS3).

D3.jsを使用してチャートを作成し、それをIronPDFを使用してPDFドキュメントに変換する手順は次のとおりです：

  • レンダーオブジェクトを作成します。
  • JavaScriptとCSSプロパティを設定します。
  • 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")
$vbLabelText   $csharpLabel

出力PDF

『フォント、JavaScript、HTML要素、ネットワーク待機等のためのWaitForオプションの詳細を探る』。

AngularJS HTMLをPDFに

AngularJSは、オープンソースのフロントエンドウェブフレームワークであり、JavaScriptベースです。 クライアントサイドのモデル–ビュー–コントローラ(MVC) およびモデル–ビュー–ビュー モデル (MVVM) アーキテクチャを使用して、シングルページアプリケーションの開発とテストを簡素化します。

完全な互換性を確保するために、Angular Universal とサーバーサイドレンダリング (SSR) を組み合わせて使用することを検討してください。

サーバーサイドレンダリング (SSR) とAngular Universal

Angular vs. Angular Universal

通常のAngularアプリケーションは、ブラウザ（クライアント側）で実行され、ユーザーの操作に基づいてDOM（ドキュメントオブジェクトモデル）にページをレンダリングします。 Angular Universalはサーバー（サーバー側）で動作し、クライアントでブートストラップされる静的ページを生成します。 これにより、読み込み時間が改善され、ユーザーはインタラクティブになる前にレイアウトを確認することができます。

よくある質問

.NET アプリケーションで JavaScript 付きの HTML をどのようにして PDF に変換できますか？

IronPDF の `RenderHtmlAsPdf` メソッドを使用して、JavaScript を含む HTML コンテンツを PDF に変換できます。レンダリング オプションで JavaScript の実行を有効にすることにより、動的コンテンツが変換時に正しく処理されるようにすることができます。

HTML を PDF に変換する際に JavaScript の実行を有効にするために必要な手順は何ですか？

IronPDF で JavaScript の実行を有効にするには、レンダリングオプション内の `EnableJavaScript` プロパティを `true` に設定します。これにより、PDF 変換時に HTML に存在する JavaScript が処理されます。

HTML を PDF に変換する前に、JavaScript コードを実行させるにはどうすればよいですか？

IronPDF の `WaitFor` クラスを使用してレンダリング オプションを構成し、JavaScript の実行に最大待ち時間を指定します。これにより、すべてのスクリプトが PDF 生成前に実行されるようになり、通常は 500 ミリ秒の待ち時間が設定されます。

HTML を PDF に変換する際に JavaScript のコンソール メッセージをキャプチャすることは可能ですか？

はい、IronPDF の `JavascriptMessageListener` プロパティを使用して JavaScript のコンソール メッセージをキャプチャできます。この機能により、PDF レンダリング プロセス中にコンソール メッセージをデバッグおよび記録できます。

JavaScript ライブラリの D3.js で作成されたチャートを IronPDF でレンダリングすることはできますか？

はい、IronPDF で D3.js で作成されたチャートをレンダリングするには、レンダリング オプションで JavaScript の実行を有効にし、`RenderHtmlFileAsPdf` などのメソッドを使用して、チャート スクリプトを含む HTML ファイルを PDF に変換します。

HTML を PDF に変換する際に JavaScript を使用する際に考えられる潜在的な課題は何ですか？

一部の複雑な JavaScript フレームワークは、JavaScript の実行中のメモリ割り当ての制約により IronPDF で問題を抱える可能性があります。スクリプトの互換性を保証するためにテストおよび最適化することを推奨します。

Angular Universal を使用したサーバーサイド レンダリングは HTML の PDF 変換にどのように役立ちますか？

Angular Universal を使用してサーバー側でプレレンダリングすることで、ページの読み込み時間が短縮され、互換性が向上します。これにより、IronPDF がこれらのページを効果的に PDF に変換できるようになります。

.NET の HTML から PDF への変換プロセスでカスタム JavaScript を実行する方法は？

レンダリング オプションの `JavaScript` プロパティに JavaScript コードを設定することでカスタム JavaScript を実行できます。これにより、IronPDF の変換プロセス中にスクリプトが実行されるようになります。

PDF 変換において JavaScript の量が多いページを処理するために推奨されるアプローチとは？

JavaScript の量が多いページには、Angular Universal などのサーバーサイド レンダリング技術を使用してコンテンツを事前にレンダリングし、IronPDF を使用して変換する前に完全に処理されることを確認してください。これにより、パフォーマンスとメモリの問題を管理できます。

IronPDF は動的コンテンツを含む HTML の変換をどのようにサポートしますか？

IronPDF は Chromium レンダリング エンジンを活用して JavaScript や jQuery の実行を可能にし、動的コンテンツを PDF 出力に保存します。

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

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

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

準備はいいですか?
Nuget ダウンロード 16,154,058 | バージョン: 2025.11 ただ今リリースされました