WaitFor クラスを使用して C# PDF レンダリングを遅延させる方法
PDF文書をレンダリングする際、JavaScriptの必要なアセットやアニメーションがすべて読み込まれる前にレンダリングプロセスが発生するという、よくある問題が発生します。 こ れに よ っ て、 PDF 文書のレ ン ダ リ ン グが不完全ま たは不正確にな る 可能性があ り ます。 最初に、この問題に対処するために、任意の遅延を設定することをユーザーに許可する解決策を採用しました。 しかしながら、任意の遅延に依存することは信頼できる効率的なアプローチではありません。
より堅実なソリューションを提供するために、PDFレンダリングプロセスを強化するWaitForクラスを実装しました。 RenderOptions の WaitFor オブジェクトは、次のようなオプションを提供します：
PageLoad：待機なしのデフォルトレンダー。RenderDelay: 任意の待機時間を設定します。Fonts: すべてのフォントが読み込まれるまで待機します。JavaScript: JavaScript 関数を使ってレンダーをトリガーする。HTML 要素：要素 ID、名前、タグ名、クエリセレクタなどの特定の HTML 要素を待機して、要素をターゲットにします。-
NetworkIdle: ネットワークがアイドル状態になるのを待機（0、2、またはカスタム量）。これらの機能は、IronPDFでHTML文字列をPDFに変換し、IronPDFでHTMLファイルをPDFに変換し、IronPDFでウェブURLをPDFに変換することができます。 この新しい機能の重要な側面を探りましょう。
C#でWaitForを使用してPDFレンダリングを遅延させる方法
- C# IronPDFライブラリをダウンロードしてPDFレンダリングを遅延させる
- HTML文字列、ファイル、またはウェブURLからPDFドキュメントを生成する
- WaitForのJavaScriptメソッドを利用してJavaScript関数からレンダリングをトリガーする
- ネットワーク活動の数に基づいてレンダリングを遅らせる
- 特定のHTML要素を待つとともに、すべてのフォントが読み込まれるのを待つ
IronPDFを始めましょう
今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。
デフォルト即時レンダーの例
デフォルトでは、レンダリングプロセスはページが読み込み完了した直後に発生します。 通常のレンダリングを行いたい場合、PageLoad メソッドを呼び出す必要はありません。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-pageload.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render as soon as the page is loaded
renderer.RenderingOptions.WaitFor.PageLoad();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");カスタムレンダリング遅延の例
PDFをレンダリングする前に特定の遅延が必要な場合、任意のミリ秒数を遅延として設定できます。 これにより、特定のタイミング要件に柔軟に対応することができます。
このオプションは、RenderingOptions.RenderDelay プロパティを使用した古い実装と同じ方法で動作します。 しかし、古いプロパティは非推奨となっており、新しいAPIであるRenderingOptions.WaitFor.RenderDelayを使用することが強く推奨されています。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-delay-time.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000);
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");すべてのフォントがロードされました例
AllFontsLoadedメソッドは、WaitForクラス内でPDFレンダリングプロセスを外部ソース（Google Fontsや他のサーバー）からすべてのフォントが読み込まれるまで一時停止させることを可能にします。 これは、最終的なPDFにすべての必要なフォントが含まれていることを保証し、文書の意図したタイポグラフィと視覚的な外観を維持します。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-all-fonts.csusing 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);カスタムJavaScript実行の例
レンダリングプロセスをより制御するために、弊社の機能では、PDFドキュメントのレンダリング前に実行する必要があるカスタムJavaScript関数を指定することができます。 これは、レンダリングプロセスを開始する前に必要なタスクやチェックを実行することを可能にします。 これにより、ユーザーはレンダーをトリガーするタイミングを制御できます。
JavaScriptでは、関数window.ironpdf.notifyRender()がレンダリングタスクをトリガーするために使用されます。 notifyRender()が呼び出されると、レンダリングプロセスが開始されます。 コントロールでき、必要なときに関数を呼び出すことができます。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-javascript.csusing 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);HTML 要素の例
このオプションを使用すると、レンダリングプロセスが特定のHTML要素、例えば要素ID、名称、タグ名、さらにはクエリセレクターを使用して要素をターゲットにすることを待つように設定できます。
要素IDを待機
以下のコード例では、特定の要素IDを待ってからレンダリングが行われます。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-id.csusing 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);要素名の待機
以下のコード例では、レンダリングプロセスは特定の要素 Name を待機します。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-name.csusing 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);要素タグ名を待つ
以下のコード例では、特定の要素タグ名を待機してレンダリングプロセスが進行します。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-tag-name.csusing 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);クエリセレクターを使用してください
以下のコード例では、レンダリングプロセスはクエリセレクタによって選択された要素を待機します。 HtmlQuerySelector メソッドは、id が 'myid' でクラスが 'blablastyle' の img タグ を待ちます。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-query-selector.csusing 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);ネットワークアイドルの例
ネットワークアクティビティなし
このタイプのネットワークアイドルでは、ネットワーク活動がなくなるまで待機することができ、通常、コンテンツが完全に読み込まれたことを示しています。 これは、シングルページアプリケーション（SPA）や長時間のポーリングのネットワークリクエストや継続的なネットワーク活動がない単純なウェブページに適しています。
レンダリング プロセスは、500ms以上の間にネットワーク アクティビティが行われていない場合にのみ開始されます。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-0.csusing 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>");許可された2つのネットワーク活動
NetworkIdle2メソッドは、ロングポーリングのネットワークリクエストやハートビートピンがあるWebアプリケーションやWebページに適しています。 通常、1〜2件のリクエストが関与します。 この場合、これらのリクエストが進行中であっても、最大2つまでであればネットワークアイドルイベントのトリガーを無効にするとは見なされません。
レンダリングプロセスを開始する前に、少なくとも500msの間最大で2つのネットワークアクティビティが残っている必要があります。 このオプションは、固定数のネットワーク活動を処理するための迅速な設定を提供します。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-2.csusing 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>");ネットワークアクティビティ許可をカスタマイズ
複数のネットワークリクエストが関与する場合、ネットワークアイドル持続時間とネットワークアイドルイベントのトリガーを無効にしない許可されるネットワークリクエストの数の両方をカスタマイズする柔軟性があります。 このオプションは、前の2つの方法に適合しない特定の要件を持つWebアプリケーションやWebページに適しています。 このカスタマイズを提供することにより、さまざまな状況の下で幅広いユースケースに対応することを保証します。
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-customize-network.csusing 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>");最大待機時間を設定
さらに、JavaScript、NetworkIdle、NetworkIdle0、およびNetworkIdle2メソッドも、待機が無期限にならないように最大待機時間を設定することができます。これらのメソッドのmaxWaitTimeパラメーターは、この目的で使用できます。
次の内容にご注意ください。
