如何使用 WaitFor 類別延遲 C# PDF 渲染

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

查克尼思·賓

在渲染PDF文件時,常見的一個問題是渲染過程在所有必要的資產和JavaScript動畫尚未加載完成之前就開始了。這可能導致PDF文檔渲染不完整或不正確。最初,我們通過允許用戶設置任意延遲作為解決方案來解決這個問題。然而,依賴任意延遲並不是一個可靠或高效的方法。

為了提供更強大的解決方案,我們實現了WaitFor類來增強PDF渲染過程。來自RenderOptionsWaitFor對象提供了多種選項,包括:

These feature are available for converting of HTML 字串, 檔案,和 Web網址 成為 PDF 文件。我們來探討這項新功能的關鍵方面。


C# NuGet 程式庫用于 PDF

安裝與 NuGet

Install-Package IronPdf
Java PDF JAR

下載 DLL

下載DLL

手動安裝到您的項目中

C# NuGet 程式庫用于 PDF

安裝與 NuGet

Install-Package IronPdf
Java PDF JAR

下載 DLL

下載DLL

手動安裝到您的項目中

立即開始在您的專案中使用IronPDF,並享受免費試用。

第一步:
green arrow pointer

查看 IronPDFNuget 快速安裝和部署。已被下載超過800萬次,它正用C#改變PDF。

C# NuGet 程式庫用于 PDF nuget.org/packages/IronPdf/
Install-Package IronPdf

請考慮安裝 IronPDF DLL 直接下載並手動安裝到您的專案或GAC表單: IronPdf.zip

手動安裝到您的項目中

下載DLL

預設立即渲染範例

預設情況下,頁面加載完成後會立即執行渲染過程。如果您想正常渲染,不需要調用 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#

所有字體載入範例

The 所有字體已載入 方法在 等待 類別允許 PDF 渲染過程暫停,直到所有字體從外部來源(如 Google 字體或其他伺服器)加載完成。這確保了最終的 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()當調用 is invoked` 時,渲染過程將開始。您可以完全控制何時調用該函數。

: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#

等待元素名稱

在下面的代碼範例中,渲染過程將會等待特定的元素名稱。

: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'class 為 '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#

網路閒置範例

無網路活動

此類型的網路閒置允許您等待直到沒有網路活動,這通常表示內容已經完全加載。這適合於單頁應用程式 (Single-Page Application)。 (SPA) 或是一個簡單的網頁,沒有任何長輪詢網路請求或正在進行的網路活動。

渲染過程將僅在沒有進行中的網路活動持續至少500毫秒後才會開始。

: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#

允許兩個網絡活動

NetworkIdle2 方法適用於具有長輪詢網絡請求或心跳檢測的網頁應用程序或網頁。通常,涉及的請求在1-2個之間。在這種情況下,即使這些請求正在進行中,也不會被認為無效觸發網絡空閒事件,因為允許最多有兩個。

在開始呈現程序之前,應在至少500毫秒最多有兩個網絡活動保持活躍。此選項提供了針對固定數量網絡活動的快速配置。

: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#

自訂網路活動允許

在涉及多個網路請求的情況下,您可以靈活地自訂 網路閒置時間允許的網路請求數量,這些請求不會使網路閒置事件的觸發失效。這個選項適用於具有特定需求的網頁應用或網頁,這些需求不適合先前的兩種方法。通過提供這種自訂功能,我們確保在不同情況下滿足廣泛的使用需求。

: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#

設定最大等待時間

另外,JavaScriptNetworkIdleNetworkIdle0NetworkIdle2 方法也允許您設置最大等待時間,以確保等待時間不會無限期延續。這些方法的 maxWaitTime 參數可以用於這個目的。

請注意
所有指定的時間值均以毫秒為單位考量。

查克尼思·賓

軟體工程師

Chaknith 是開發者界的夏洛克福爾摩斯。他第一次意識到自己可能有個軟體工程的未來,是在他為了娛樂而參加程式挑戰的時候。他的重點是 IronXL 和 IronBarcode,但他也引以為豪的是,他幫助客戶解決所有產品的問題。Chaknith 利用他與客戶直接對話中獲得的知識,以進一步改進產品。他的實際反饋超越了 Jira 工單,並支持產品開發、文件撰寫和行銷,以提升客戶的整體體驗。不在公司時,他通常在學習機器學習、寫程式和徒步旅行。