使用 C# WaitFor類別延遲 PDF 渲染
IronPDF 中的 C# WaitFor類別可以幫助開發人員延遲 PDF 渲染,直到所有資源、字體和 JavaScript 都已載入完畢,透過使用RenderDelay 、 NetworkIdle和 JavaScript 觸發器等方法,防止渲染不完整。
快速入門:使用WaitFor改進 PDF 渲染
IronPDF 的WaitFor功能可讓開發人員透過管理非同步計時來改善 PDF 渲染。 透過設定RenderDelay等選項,您可以確保所有資源和腳本在轉換之前載入完畢,從而防止出現不完整的 PDF 文件。 本指南展示如何在專案中實現WaitFor ,以實現精確且有效率的渲染。
new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.WaitFor.RenderDelay(3000) } }
.RenderUrlAsPdf("https://example.com")
.SaveAs("output.pdf");new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.WaitFor.RenderDelay(3000) } }
.RenderUrlAsPdf("https://example.com")
.SaveAs("output.pdf");最簡工作流程(5個步驟)
- 下載 C# IronPDF 庫以延遲 PDF 渲染
- 從 HTML 字串、文件或網頁 URL 產生 PDF 文檔
- 使用 JavaScript 的
WaitFor方法從 JavaScript 函數觸發渲染。 - 根據網路活動數量延遲渲染
- 等待特定 HTML 元素以及所有字型載入完畢。
WaitFor類別及其選項為何?
為了以最佳效能渲染 PDF , WaitFor類別改進了 PDF 渲染流程。 RenderOptions中的WaitFor物件提供了幾個選項:
PageLoad:預設渲染,無需等待。RenderDelay:設定任意等待時間。Fonts:等待所有字體載入完畢。JavaScript:使用 JavaScript 函數觸發渲染。HTML elements:等待特定的 HTML 元素,例如元素 ID、名稱、標籤名稱和查詢選擇器,以定位元素。NetworkIdle:等待網路空閒(0、2 或自訂數量)。
這些功能在使用 IronPDF 將 HTML 字串轉換為 PDF 、將 HTML 文件轉換為 PDF以及將 Web URL 轉換為 PDF時有效。
如何立即渲染PDF檔案而無需等待?
預設情況下,頁面載入完成後立即進行渲染。 正常渲染不需要呼叫PageLoad方法。 這種方法適用於不包含複雜 JavaScript 或外部資源的簡單 HTML 內容。
: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渲染前新增自訂延遲?
如果在渲染 PDF 之前需要特定的延遲時間,您可以將任意毫秒數設定為延遲時間。 這為特定的時間要求提供了靈活性,尤其是在處理大量 JavaScript 內容時。
此選項與使用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>");當您的 HTML 包含動畫、延遲載入的內容或需要時間來產生動態內容時,延遲機制就非常有用。 對於複雜的渲染場景,請探索自訂渲染選項。
如何等待所有字體載入完畢後再進行渲染?
WaitFor類別中的AllFontsLoaded方法會暫停 PDF 渲染,直到所有字體從 Google Fonts 等外部來源載入完成。 這樣可以確保最終生成的 PDF 文件包含所有必需的字體,從而保留文件預期的排版和視覺外觀。 此功能可維持專業的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);有關管理 PDF 中字體的更多信息,包括嵌入和子集選項,請查看PDF 中字體管理指南。
如何使用自訂 JavaScript 觸發 PDF 渲染?
為了更好地控制渲染過程,您可以指定一個自訂 JavaScript 函數,該函數在渲染 PDF 文件之前執行。 這樣,您就可以在啟動渲染過程之前執行必要的任務或檢查,從而控制何時觸發渲染。
在 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);當與 AJAX 請求結合使用,或確保動態產生的內容在渲染之前完全載入時,這種方法非常有效。 對於進階 JavaScript 場景,請參閱在 PDF 中執行自訂 JavaScript 的指南。
如何等待特定的HTML元素載入完畢後再進行渲染?
使用此選項,渲染過程會等待特定的 HTML 元素,例如元素 ID、名稱、標籤名稱和查詢選擇器,以定位元素。 此功能有助於處理單頁應用程式 (SPA) 或非同步載入的內容。
如何透過 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);如何透過名稱屬性等待元素?
下面的程式碼範例中,渲染過程會等待特定的元素名稱。
: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);如何按標籤名稱等待元素?
在下面的程式碼範例中,渲染過程會等待特定的元素標籤名稱。
: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 of 'myid'且class of 'blablastyle' img tag 。
: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);如何等待網路活動完成?
渲染網頁時,如果網頁需要向網路請求資源、資料或 API 調用,請確保在產生 PDF 之前所有網路活動都已完成。 IronPDF 提供了多種方法來處理不同的網路場景。
我應該等到網路活動完全停止後再等待?
這種類型的網路空閒狀態會一直等待,直到沒有網路活動為止,這通常表示內容已完全載入。 這適用於單頁應用程式 (SPA) 或沒有長輪詢網路請求或持續網路活動的簡單網頁。
當至少 500 毫秒內沒有持續的網路活動時,渲染過程開始。
: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>");何時應該允許兩項網路活動?
NetworkIdle2方法適用於具有長輪詢網路請求或心跳 ping 的 Web 應用程式或網頁。 通常情況下,會涉及 1-2 個請求。 即使這些請求仍在進行中,也不會使網路空閒事件的觸發無效,因為最多只有兩個請求是可以接受的。
在開始渲染過程之前,最多應該有兩個網路活動持續至少 500 毫秒。 此選項可快速配置以處理固定數量的網路活動。
: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>");如何自訂網路活動閾值?
當涉及多個網路請求時,您可以自訂網路空閒持續時間和允許的網路請求數量,而不會使網路空閒事件失效。 此選項適用於不符合前兩種方法的特定要求的 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>");對於需要保持持久連接或具有可預測的後台網路活動模式的複雜 Web 應用程式而言,這種程度的客製化非常重要。
如何設定最長等待時間?
JavaScript的NetworkIdle 、 NetworkIdle0和NetworkIdle2方法可讓您設定最大等待時間,以確保等待不會無限期地持續下去。這些方法的maxWaitTime參數用於實現此目的。 這樣可以防止應用程式在預期條件始終未出現時無限期地掛起。
所有指定時間值均以毫秒為單位。
在實施這些等待策略時,要平衡確保內容完全載入並保持合理的效能。 對於需要精確時間控制的應用,可以探索非同步 PDF 生成技術。
準備好要看看你還能做什麼了嗎? 請查看此處的教學頁面:附加功能,或探索使用 IronPDF 建立 PDF以了解更多進階技巧。
常見問題解答
什麼是 WaitFor 類別,為什麼要使用它?
IronPDF 中的 WaitFor 類允許開發人員延遲 PDF 的渲染,直到所有的資產、字型和 JavaScript 都載入完成為止。這可防止不完整的渲染,並確保複雜的網頁在轉換為 PDF 之前已完全載入,從而產生更精確、更完整的 PDF 文件。
有哪些不同的 WaitFor 選項?
IronPDF 的 WaitFor 類提供多種選項:PageLoad (預設立即渲染)、RenderDelay (以毫秒為單位的自訂延遲)、Fonts (等待所有字型載入)、JavaScript (透過 JavaScript 函式觸發渲染)、HTML 元素 (依 ID、名稱、標籤或查詢選擇器等待特定元素),以及 NetworkIdle (等待網路活動停止)。
如何在 PDF 呈現之前加入自訂延遲?
您可以使用 IronPDF 中的 RenderDelay 方法新增自訂延遲。只需指定以毫秒為單位的延遲即可:`new ChromePdfRenderer { RenderingOptions = { WaitFor = WaitFor.RenderDelay(3000) }。}`.這對需要額外時間執行的 JavaScript 繁重內容特別有用。
我可以等待特定的 HTML 元素載入後再渲染嗎?
是的,IronPDF 允許您使用元素 ID、名稱、標籤名稱或查詢選擇器來等待特定的 HTML 元素。這可確保在 PDF 轉換開始之前,頁面上已存在關鍵內容,避免最終 PDF 文件中遺漏元素。
NetworkIdle 是什麼?
IronPDF 中的 NetworkIdle 會在渲染 PDF 前等待網路活動停止。您可以將其設定為等待 0、2 或自訂數量的網路連線。這非常適合透過 AJAX 呼叫或其他異步網路請求動態載入內容的頁面。
如何從 JavaScript 觸發 PDF 渲染?
IronPDF 的 WaitFor JavaScript 選項允許您從 JavaScript 函式觸發渲染程序。這可讓您完全控制 PDF 產生的時間,非常適合需要精確時間控制的單頁應用程式或複雜 JavaScript 驅動的網站。






