How to use the Waitfor Method to Delay C# PDF Renders
When rendering PDF documents, a common issue arises where the rendering process occurs before all the necessary assets and animation of javascript have finished loading. This can result in incomplete or incorrect rendering of the PDF document. Initially, we addressed this issue by allowing the user to set an arbitrary delay as a solution. However, relying on an arbitrary delay is not a reliable or efficient approach.
To provide a more robust solution, we have implemented a WaitFor feature that enhances the PDF rendering process. The WaitFor object from RenderOptions offers several options, including:
PageLoad: Default render with no waiting.RenderDelay: Setting an arbitrary waiting time.Fonts: Waits until all the fonts have loaded.JavaScript: Triggering the render with a JavaScript function.HTML elements: Waits for specific HTML elements, such as element IDs, names, tag names, and query selectors to target elements.NetworkIdle: Waiting for network idle (0, 2, or a custom amount).
These feature are available for converting of HTML string, files, and web URLs to PDF document. Let's explore the key aspects of this new feature.
How to Use WaitFor to Delay PDF Render in C#
- Download the C# library to delay PDF render
- Generate a PDF document from an HTML string, file, or web URL
- Utilize the JavaScript method of WaitFor to trigger the render from a JavaScript function
- Delay the render based on the number of network activities
- Wait for specific HTML elements as well as for all the fonts to be loaded
Install with NuGet
Install-Package IronPdf
Default Immediate Render Example
By default, the rendering process occurs immediately after the page has finished loading. This is the default behavior, and the method does not need to be called if you want to render normally.
: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>");IRON VB CONVERTER ERROR developers@ironsoftware.comCustom Render Delay Example
In situations where a specific delay is required before rendering the PDF, you can set an arbitrary number of milliseconds as a delay. This provides flexibility in accommodating any specific timing requirements.
This option works the same way as the old implementation using the RenderingOptions.RenderDelay property. However, the old property has been deprecated, and it is highly recommended to use the new 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>");Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000)
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")All Fonts Loaded Example
The AllFontsLoaded method in the WaitFor class allows the PDF rendering process to pause until all fonts are loaded from external sources like Google Fonts or other servers. This ensures that the final PDF includes all required fonts, preserving the document's intended typography and visual appearance.
: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);IRON VB CONVERTER ERROR developers@ironsoftware.comCustom JavaScript Execution Example
For more control over the rendering process, our feature allows you to specify a custom JavaScript function that needs to be executed before rendering the PDF document. This enables you to perform any necessary tasks or checks before initiating the rendering process. This gives the user control over when to trigger the render.
In JavaScript, the function window.ironpdf.notifyRender() is used to trigger the rendering task. Once notifyRender() is invoked, the rendering process will start. You have full control over when to invoke the function.
: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);IRON VB CONVERTER ERROR developers@ironsoftware.comHTML Elements Example
With this option, the rendering process can be set to wait for specific HTML elements, such as element IDs, names, tag names, and even using query selectors to target elements.
Wait for Element ID
In the code example below, the rendering will wait for a specific element 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);IRON VB CONVERTER ERROR developers@ironsoftware.comWait for Element Name
In the code example below, the rendering process will wait for a specific element 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);IRON VB CONVERTER ERROR developers@ironsoftware.comWait for Element Tag Name
In the code example below, the rendering process will wait for a specific element tag name.
: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);IRON VB CONVERTER ERROR developers@ironsoftware.comUse Query Selector
In the code example below, the rendering process will wait for the element selected by the query selector. The HtmlQuerySelector method will wait for an img tag with an id of 'myid' and a class of 'blablastyle'.
: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);IRON VB CONVERTER ERROR developers@ironsoftware.comNetwork Idle Example
No Network Activity
This type of networkidle allows you to wait until there is no network activity, which typically indicates that the content has been fully loaded. This is suitable for a Single-Page Application (SPA) or a simple web page that doesn't have any long-polling network requests or ongoing network activity.
The rendering process will only commence once there has been no ongoing network activity for at least 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>");IRON VB CONVERTER ERROR developers@ironsoftware.comTwo Network Activities Allowed
The NetworkIdle2 method is suitable for web applications or web pages that have long-polling network requests or heartbeat pings. Typically, there are 1-2 requests involved. In this case, even if these requests are ongoing, they won't be considered to invalidate the triggering of the network idle event, as it is acceptable to have at most two of them.
Before initiating the rendering process, there should be at most two network activities remaining for at least 500ms. This option provides a quick configuration for handling a fixed number of network activities.
: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>");IRON VB CONVERTER ERROR developers@ironsoftware.comCustomize Network Activity Allowance
In cases where multiple network requests are involved, you have the flexibility to customize both the network idle duration and the number of allowed network requests that don't invalidate the triggering of the network idle event. This option is suitable for web applications or web pages with specific requirements that don't fit the previous two methods. By providing this customization, we ensure that we address a wide range of use cases under different circumstances.
: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>");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>")Set Maximum Waiting Time
In addition, the JavaScript, NetworkIdle, NetworkIdle0, and NetworkIdle2 methods also allow you to set a maximum waiting time to ensure that the wait will not be indefinite. The maxWaitTime parameter of these methods can be used for this purpose.
Please note
