Cómo utilizar la clase WaitFor para retrasar el renderizado de PDF en C
Al renderizar documentos PDF, surge un problema común cuando el proceso de renderizado se produce antes de que todos los activos y animaciones necesarios de JavaScript hayan terminado de cargarse. Esto puede dar lugar a una representación incompleta o incorrecta del documento PDF. Inicialmente, abordamos este problema permitiendo al usuario fijar un retraso arbitrario como solución. Sin embargo, confiar en un retraso arbitrario no es un planteamiento fiable ni eficaz.
Para ofrecer una solución más robusta, hemos implementado una clase WaitFor que mejora el proceso de renderizado de PDF. El objeto WaitFor de RenderOptions ofrece varias opciones, incluyendo:
PageLoad: Renderizado por defecto sin espera.RenderDelay: Configuración de un tiempo de espera arbitrario.Fuentes: Espera hasta que todas las fuentes se hayan cargado.JavaScript: Activar el renderizado con una función de JavaScript.Elementos HTML: Espera a que aparezcan elementos HTML específicos, tales como IDs de elementos, nombres, nombres de etiquetas y selectores de consulta para apuntar a elementos.-
NetworkIdle: Esperando a que la red esté inactiva (0, 2 o una cantidad personalizada).Estas características están disponibles para convertir cadenas HTML a PDF con IronPDF, archivos HTML a PDF con IronPDF y URLs de la web a PDF con IronPDF. Exploremos los aspectos clave de esta nueva función.
Cómo utilizar WaitFor para retrasar la renderización de PDF en C#
- Descargue la biblioteca de IronPDF para C# para retrasar la renderización de PDF
- Generar un documento PDF a partir de una cadena HTML, un archivo o una URL web
- Utilice el método JavaScript de WaitFor para activar el renderizado desde una función JavaScript
- Retrasar el renderizado según el número de actividades de red
- Espere a que aparezcan elementos HTML específicos así como a que todas las fuentes se carguen
Comience con IronPDF
Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.
Ejemplo de renderización inmediata por defecto
Por defecto, el proceso de renderizado se produce inmediatamente después de que la página haya terminado de cargarse. El método PageLoad no necesita ser llamado si deseas renderizar normalmente.
: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.comEjemplo de retardo de renderizado personalizado
En situaciones en las que se requiere un retardo específico antes de renderizar el PDF, puede establecer un número arbitrario de milisegundos como retardo. De este modo se consigue flexibilidad para adaptarse a cualquier requisito específico de sincronización.
Esta opción funciona de la misma manera que la antigua implementación utilizando la propiedad RenderingOptions.RenderDelay. Sin embargo, la propiedad antigua ha quedado obsoleta, y se recomienda encarecidamente utilizar la nueva 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>")Todas las fuentes cargadas Ejemplo
El método AllFontsLoaded en la clase WaitFor permite que el proceso de renderización de PDF se pause hasta que todas las fuentes se carguen desde fuentes externas como Google Fonts u otros servidores. Esto garantiza que el PDF final incluya todas las fuentes necesarias, preservando la tipografía y el aspecto visual previstos para el documento.
: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.comEjemplo de ejecución personalizada de JavaScript
Para un mayor control sobre el proceso de renderizado, nuestra función le permite especificar una función JavaScript personalizada que debe ejecutarse antes de renderizar el documento PDF. Esto le permite realizar cualquier tarea o comprobación necesaria antes de iniciar el proceso de renderizado. De este modo, el usuario controla cuándo se activa el renderizado.
En JavaScript, la función window.ironpdf.notifyRender() se utiliza para activar la tarea de renderizado. Una vez que se invoque notifyRender(), el proceso de renderización comenzará. Usted tiene pleno control sobre cuándo invocar la función.
: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.comEjemplo de elementos HTML
Con esta opción, el proceso de renderizado puede configurarse para esperar elementos HTML específicos, como IDs de elementos, nombres, nombres de etiquetas, e incluso utilizando selectores de consulta para apuntar a elementos.
Esperar ID de elemento
En el siguiente ejemplo de código, el renderizado esperará un ID de elemento específico.
: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.comEsperar nombre de elemento
En el siguiente ejemplo de código, el proceso de renderizado esperará a un elemento específico Nombre.
: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.comEsperar nombre de etiqueta de elemento
En el ejemplo de código siguiente, el proceso de renderizado esperará un nombre de etiqueta de elemento específico.
: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.comUtilizar el selector de consultas
En el siguiente ejemplo de código, el proceso de renderizado esperará al elemento seleccionado por el selector de consulta. El método HtmlQuerySelector esperará a una etiqueta img con un id de 'myid' y una clase de '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.comEjemplo de red inactiva
Sin actividad en la red
Este tipo de inactividad de la red permite esperar hasta que no haya actividad en la red, lo que suele indicar que el contenido se ha cargado por completo. Esto es adecuado para una Aplicación de Página Única (SPA) o una página web simple que no tenga solicitudes de sondeo largo ni actividad de red continua.
El proceso de renderización solo comenzará una vez que no haya habido ninguna actividad de red durante al menos 500 ms.
: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.comDos actividades de red permitidas
El método NetworkIdle2 es adecuado para aplicaciones web o páginas web que tienen solicitudes de red de sondeo prolongado o mensajes de latidos. Por lo general, se trata de una o dos solicitudes. En este caso, aunque estas solicitudes estén en curso, no se considerará que invalidan la activación del evento de red inactiva, ya que es aceptable tener como máximo dos de ellas.
Antes de iniciar el proceso de renderizado, deben quedar como máximo dos actividades de red durante al menos 500 ms. Esta opción proporciona una configuración rápida para gestionar un número fijo de actividades de red.
: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.comPersonalizar la asignación de actividad de red
En casos donde están involucradas múltiples solicitudes de red, tienes la flexibilidad de personalizar tanto la duración de inactividad de la red como el número de solicitudes de red permitidas que no invalidan el desencadenamiento del evento de inactividad de la red. Esta opción es adecuada para aplicaciones web o páginas web con requisitos específicos que no se ajustan a los dos métodos anteriores. Al ofrecer esta personalización, nos aseguramos de abordar una amplia gama de casos de uso en diferentes circunstancias.
: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>")Establecer el tiempo máximo de espera
Además, los métodos JavaScript, NetworkIdle, NetworkIdle0 y NetworkIdle2 también te permiten establecer un tiempo máximo de espera para asegurarte de que la espera no sea indefinida. El parámetro maxWaitTime de estos métodos puede ser usado con este propósito.
Atención
