如何使用 WaitFor 類別延遲 C# PDF 渲染
在渲染PDF文件時,常見的一個問題是渲染過程在所有必要的資產和JavaScript動畫尚未加載完成之前就開始了。這可能導致PDF文檔渲染不完整或不正確。最初,我們通過允許用戶設置任意延遲作為解決方案來解決這個問題。然而,依賴任意延遲並不是一個可靠或高效的方法。
為了提供更強大的解決方案,我們實現了WaitFor類來增強PDF渲染過程。來自RenderOptions的WaitFor對象提供了多種選項,包括:
PageLoad
:預設渲染無需等待。渲染延遲
設定任意等待時間。字體
等待所有字體加載完成。JavaScript
使用 JavaScript 函數觸發渲染。HTML 元素
: Waits for specific HTML 元素, such as element IDs, names, tag names, and query selectors to target elements.網路閒置
: 等待網絡閒置 (0、2 或自訂数量).
These feature are available for converting of HTML 字串, 檔案,和 Web網址 成為 PDF 文件。我們來探討這項新功能的關鍵方面。
如何在 C# 中使用 WaitFor 延遲 PDF 渲染
- 下載 C# 函式庫以延遲 PDF 渲染
- 從 HTML 字串、檔案或網頁 URL 生成 PDF 文件
- 利用 JavaScript 的 WaitFor 方法從 JavaScript 函數觸發渲染
- 根據網路活動的數量延遲渲染
- 等待特定的HTML元素 以及 加載所有字體
立即開始在您的專案中使用IronPDF,並享受免費試用。
查看 IronPDF 上 Nuget 快速安裝和部署。已被下載超過800萬次,它正用C#改變PDF。
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
自定義渲染延遲範例
在需要在渲染 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>")
所有字體載入範例
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
自訂 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
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
等待元素名稱
在下面的代碼範例中,渲染過程將會等待特定的元素名稱。
: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
等待元素標籤名稱
在下面的代碼示例中,渲染過程將等待一個特定的元素標籤名稱。
: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
使用查詢選擇器
在下面的代碼示例中,渲染過程將等待由查詢選擇器選擇的元素。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
網路閒置範例
無網路活動
此類型的網路閒置允許您等待直到沒有網路活動,這通常表示內容已經完全加載。這適合於單頁應用程式 (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
允許兩個網絡活動
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
自訂網路活動允許
在涉及多個網路請求的情況下,您可以靈活地自訂 網路閒置時間 和 允許的網路請求數量,這些請求不會使網路閒置事件的觸發失效。這個選項適用於具有特定需求的網頁應用或網頁,這些需求不適合先前的兩種方法。通過提供這種自訂功能,我們確保在不同情況下滿足廣泛的使用需求。
: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>")
設定最大等待時間
另外,JavaScript
、NetworkIdle
、NetworkIdle0
和 NetworkIdle2
方法也允許您設置最大等待時間,以確保等待時間不會無限期延續。這些方法的 maxWaitTime 參數可以用於這個目的。