1. IronPDF
  2. ハウツー
  3. `WaitFor` を使用して PDF レンダリングを遅延させる

待機クラスを使用してC# PDFレンダリングを遅延させる方法

This article was translated from English: Does it need improvement?
Translated
View the article in English

によって チャクニット・ビン

PDF文書をレンダリングする際、JavaScriptの必要なアセットやアニメーションがすべて読み込まれる前にレンダリングプロセスが発生するという、よくある問題が発生します。 こ れに よ っ て、 PDF 文書のレ ン ダ リ ン グが不完全ま たは不正確にな る 可能性があ り ます。 最初に、この問題に対処するために、任意の遅延を設定することをユーザーに許可する解決策を採用しました。 しかしながら、任意の遅延に依存することは信頼できる効率的なアプローチではありません。

より強力なソリューションを提供するために、PDFレンダリングプロセスを強化するWaitForクラスを実装しました。 RenderOptions の WaitFor オブジェクトはいくつかのオプションを提供します。


IronPDFを始めましょう

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

最初のステップ:
green arrow pointer

デフォルト即時レンダーの例

デフォルトでは、レンダリングプロセスはページが読み込み完了した直後に発生します。 通常のレンダリングを行いたい場合は、PageLoad メソッドを呼び出す必要はありません。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-pageload.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render as soon as the page is loaded
renderer.RenderingOptions.WaitFor.PageLoad();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

カスタムレンダリング遅延の例

PDFをレンダリングする前に特定の遅延が必要な場合、任意のミリ秒数を遅延として設定できます。 これにより、特定のタイミング要件に柔軟に対応することができます。

このオプションは、RenderingOptions.RenderDelay プロパティを使用する以前の実装と同じ方法で機能します。 ただし、旧プロパティは廃止されており、新しいAPI RenderingOptions.WaitFor.RenderDelay の使用が強く推奨されています。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-delay-time.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000);

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
VB   C#

すべてのフォントがロードされました例

その AllFontsLoaded（全フォント読み込み済み） メソッド内の 待機 クラスは、Googleフォントや他のサーバーなど外部ソースからすべてのフォントがロードされるまでPDFレンダリングプロセスを一時停止することを可能にします。 これは、最終的なPDFにすべての必要なフォントが含まれていることを保証し、文書の意図したタイポグラフィと視覚的な外観を維持します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-all-fonts.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <!-- for google web fonts -->
  <link rel=""preconnect"" href=""https://fonts.googleapis.com"">
  <link rel=""preconnect"" href=""https://fonts.gstatic.com"" crossorigin>
  <link rel=""stylesheet"" href=""https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"" >

  <style>
  /* for remote fonts */
  @font-face {
    font-family: 'CustomFont';
    src: url('https://stage.gradfinale.co.uk/tcpdf/fonts/avgr65wttf.ttf');
  }
  p#p1 { font-family: CustomFont, sans-serif; }

  /* for local fonts */
  @font-face {
    font-family: 'LocalCustomFont';
    src: local('Arial');
  }
  p#p3 { font-family: LocalCustomFont, sans-serif; }
  </style>
</head>
<body>
	<h1>This is Delayed Render Test!</h1>
	<p style=""font-family: Roboto, monospace;"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
	<p id=""p1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
	<p id=""p3"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
</body>
</html>)";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.AllFontsLoaded(10000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

カスタムJavaScript実行の例

レンダリングプロセスをより制御するために、弊社の機能では、PDFドキュメントのレンダリング前に実行する必要があるカスタムJavaScript関数を指定することができます。 これは、レンダリングプロセスを開始する前に必要なタスクやチェックを実行することを可能にします。 これにより、ユーザーはレンダーをトリガーするタイミングを制御できます。

JavaScriptでは、関数 window.ironpdf.notifyRender()はレンダリングタスクをトリガーするために使用されます。 notifyRenderが呼び出されると、IronPDFエンジンは指定されたPDFをレンダリングするプロセスを開始します。このメソッドは、PDF生成タスクを完了するためにオーバーヘッドを最小限に抑え、効率的なパフォーマンスを提供します。レンダリングが完了すると、開発者は提供されたハンドラを使用して結果を検証および操作できます。()`が呼び出されると、レンダリングプロセスが開始されます。 コントロールでき、必要なときに関数を呼び出すことができます。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-javascript.cs
using IronPdf;

string html = @"<!DOCTYPE html>
<html>
<body>
<h1>Testing</h1>
<script type='text/javascript'>

// Set delay
setTimeout(function() {
    window.ironpdf.notifyRender();
}, 1000);

</script>
</body>
</html>";

ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();

// Set rendering to wait for the notifyRender function
renderingOptions.WaitFor.JavaScript(5000);

PdfDocument pdf = ChromePdfRenderer.StaticRenderHtmlAsPdf(html, renderingOptions);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

HTML 要素の例

このオプションを使用すると、レンダリングプロセスが特定のHTML要素、例えば要素ID、名称、タグ名、さらにはクエリセレクターを使用して要素をターゲットにすることを待つように設定できます。

要素IDを待機

以下のコード例では、特定の要素IDを待ってからレンダリングが行われます。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-id.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
	setTimeout(function() {
		var h1Tag = document.createElement(""h1"");
		h1Tag.innerHTML = ""bla bla bla"";
		h1Tag.setAttribute(""id"", ""myid"");

        var block = document.querySelector(""div#x"");
		block.appendChild(h1Tag);
	}, 1000);
  </script>
</head>
<body>
	<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementById("myid", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

要素名の待機

以下のコード例では、レンダリングプロセスは特定の要素 Name を待機します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-name.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
	setTimeout(function() {
		var h1Tag = document.createElement(""h1"");
		h1Tag.innerHTML = ""bla bla bla"";
		h1Tag.setAttribute(""name"", ""myName"");

        var block = document.querySelector(""div#x"");
		block.appendChild(h1Tag);
	}, 1000);
  </script>
</head>
<body>
	<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByName("myName", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

要素タグ名を待つ

以下のコード例では、特定の要素タグ名を待機してレンダリングプロセスが進行します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-tag-name.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
	setTimeout(function() {
		var newElem = document.createElement(""h2"");
		newElem.innerHTML = ""bla bla bla"";

        var block = document.querySelector(""div#x"");
		block.appendChild(newElem);
	}, 1000);
  </script>
</head>
<body>
	<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByTagName("h2", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

クエリセレクターを使用してください

以下のコード例では、レンダリングプロセスはクエリセレクタによって選択された要素を待機します。 HtmlQuerySelector メソッドは id が 'myid' であり、クラスが 'blablastyle' の img タグ を待機します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-query-selector.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <script type=""text/javascript"">
	setTimeout(function() {
		var img = document.createElement(""img"");
		img.onload = function() {
			img.setAttribute(""id"", ""myid"");
			img.setAttribute(""class"", ""blablastyle"");
			var block = document.getElementById(""x"");
			block.appendChild(img);
		};
		img.src = ""https://www.w3schools.com/images/picture.jpg"";	// .src after .onload to ignore cached, if any
	}, 1000);
  </script>
</head>
<body>
	<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("img#myid.blablastyle", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

ネットワークアイドルの例

ネットワークアクティビティなし

このタイプのネットワークアイドルでは、ネットワーク活動がなくなるまで待機することができ、通常、コンテンツが完全に読み込まれたことを示しています。 これはシングルページアプリケーションに適しています(シングルページアプリケーション)または、ロングポーリングネットワークリクエストや進行中のネットワークアクティビティがないシンプルなウェブページ。

レンダリングプロセスは、少なくとも500ms間ネットワーク活動がない状態になって初めて開始されます。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-0.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there has been no network activity for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle0();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

許可された2つのネットワーク活動

NetworkIdle2 メソッドは、長時間のポーリングネットワーク要求やハートビートピングを持つウェブアプリケーションまたはウェブページに適しています。 通常、1〜2件のリクエストが関与します。 この場合、これらのリクエストが進行中であっても、最大2つまでであればネットワークアイドルイベントのトリガーを無効にするとは見なされません。

レンダリングプロセスを開始する前に、少なくとも500msの間に最大2つのネットワーク活動が残っている必要があります。 このオプションは、固定数のネットワーク活動を処理するための迅速な設定を提供します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-2.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there are at most 2 network activities for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle2();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

ネットワークアクティビティ許可をカスタマイズ

複数のネットワーク要求が関与する場合、ネットワークアイドル期間およびネットワークアイドルイベントのトリガーを無効にしない許可されるネットワーク要求の数の両方をカスタマイズする柔軟性があります。 このオプションは、前の2つの方法に適合しない特定の要件を持つWebアプリケーションやWebページに適しています。 このカスタマイズを提供することにより、さまざまな状況の下で幅広いユースケースに対応することを保証します。

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-customize-network.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5);

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
VB   C#

最大待機時間を設定

また、JavaScript、NetworkIdle、NetworkIdle0、およびNetworkIdle2メソッドも、待機が無期限にならないように最大待機時間を設定することができます。この目的のために、これらのメソッドの maxWaitTime パラメーターを使用できます。

次の内容にご注意ください。
すべての指定された時間値はミリ秒単位であると見なされます。

Chaknith related to 最大待機時間を設定

チャクニット・ビン

ソフトウェアエンジニア

チャクニットは開発者のシャーロック・ホームズです。彼がソフトウェアエンジニアリングの将来性に気付いたのは、楽しみでコーディングチャレンジをしていたときでした。彼のフォーカスはIronXLとIronBarcodeにありますが、すべての製品でお客様を助けることに誇りを持っています。チャクニットは顧客と直接話すことで得た知識を活用して、製品自体のさらなる改善に貢献しています。彼の逸話的なフィードバックは、単なるJiraチケットを超えて、製品開発、ドキュメントおよびマーケティングをサポートし、顧客の全体的な体験を向上させます。オフィスにいないときは、機械学習やコーディングについて学んだり、ハイキングを楽しんだりしています。