Uso de la clase WaitFor de C# para retrasar la representación de PDF
La clase C# WaitFor en IronPDF ayuda a los desarrolladores a retrasar la renderización de PDF hasta que se hayan cargado todos los recursos, fuentes y JavaScript, lo que evita renderizaciones incompletas mediante métodos como RenderDelay , NetworkIdle y activadores de JavaScript.
Inicio rápido: Cómo usar WaitFor para mejorar la representación de PDF
La función WaitFor de IronPDF permite a los desarrolladores mejorar la representación de PDF mediante la gestión de la sincronización asincrónica. Al establecer opciones como RenderDelay, se puede asegurar que todos los recursos y scripts estén cargados antes de la conversión, previniendo documentos PDF incompletos. Esta guía muestra cómo implementar WaitFor en sus proyectos para una renderización precisa y eficiente.
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");Flujo de trabajo mínimo (5 pasos)
- Descargue la biblioteca IronPDF de C# para retrasar el procesamiento de PDF
- Genera un documento PDF a partir de una cadena HTML, archivo, o URL web
- Utilice el método JavaScript de
WaitForpara activar la representación desde una función JavaScript - Retrasa la renderización basada en el número de actividades de red
- Esperar por elementos HTML específicos así como por la carga de todas las fuentes
¿Qué es la clase WaitFor y sus opciones?
Para renderizar archivos PDF con un rendimiento óptimo , la clase WaitFor mejora el proceso de renderizado de PDF. El objeto WaitFor de RenderOptions ofrece varias opciones:
PageLoad: Renderización por defecto sin esperar.RenderDelay: Establece un tiempo de espera arbitrario.Fonts: Espera hasta que se hayan cargado todas las fuentes.JavaScript: Activa la renderización con una función JavaScript.Elementos HTML: Esperar por elementos HTML específicos, como IDs de elementos, nombres, nombres de etiquetas y selectores de consultas para objetivos específicos.NetworkIdle: Espera a que la red esté inactiva (0, 2, o una cantidad personalizada).
Estas funciones funcionan al convertir cadenas HTML a PDF con IronPDF, archivos HTML a PDF con IronPDF y URL web a PDF con IronPDF.
¿Cómo renderizar archivos PDF inmediatamente sin esperar?
Por defecto, la renderización se produce inmediatamente después de que la página termina de cargarse. El método PageLoad no necesita ser llamado para una renderización normal. Este enfoque funciona bien para contenidos HTML sencillos sin JavaScript complejo ni recursos externos.
: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>");¿Cómo puedo añadir un retardo personalizado antes de renderizar un PDF?
Cuando se requiere un retardo específico antes de renderizar el PDF, se puede establecer un número arbitrario de milisegundos como retardo. Esto proporciona flexibilidad para los requisitos de tiempo específicos, especialmente cuando se trata de contenido con mucho JavaScript.
Esta opción funciona igual que la antigua implementación utilizando la propiedad RenderingOptions.RenderDelay. Sin embargo, la antigua propiedad ha quedado obsoleta. Utilice 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>");El mecanismo de retardo es útil cuando su HTML contiene animaciones, contenido de carga perezosa o requiere tiempo para la generación de contenido dinámico. Para escenarios de renderizado complejos, explore opciones de renderizado personalizado.
¿Cómo puedo esperar a que se carguen todas las fuentes antes de renderizar?
El método AllFontsLoaded de la clase WaitFor detiene la representación del PDF hasta que se cargan todas las fuentes desde fuentes externas como Google Fonts. Esto garantiza que el PDF final incluya todas las fuentes necesarias, preservando la tipografía y el aspecto visual previstos para el documento. Esta función mantiene una calidad de salida PDF profesional.
: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);Para obtener más información sobre la gestión de fuentes en PDF, incluidas las opciones de incrustación y subconjunto, consulte la guía sobre gestión de fuentes en PDF.
¿Cómo activar la renderización de PDF mediante JavaScript personalizado?
Para un mayor control sobre el proceso de renderizado, puede especificar una función JavaScript personalizada que se ejecute antes de renderizar el documento PDF. Esto le permite realizar las tareas o comprobaciones necesarias antes de iniciar el proceso de renderizado, dándole el control sobre cuándo activar el renderizado.
En JavaScript, la función window.ironpdf.notifyRender() activa la tarea de renderizado. Una vez que se invoca notifyRender(), se inicia el proceso de renderizado. Usted controla 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);Este enfoque es eficaz cuando se combina con solicitudes AJAX o para garantizar que el contenido generado dinámicamente se cargue completamente antes de renderizarse. Para situaciones avanzadas de JavaScript, consulte la guía sobre ejecución de JavaScript personalizado en PDF.
¿Cómo puedo esperar elementos HTML específicos antes de renderizar?
Con esta opción, el proceso de renderizado espera elementos HTML específicos, como ID de elementos, nombres, nombres de etiquetas y selectores de consulta a elementos de destino. Esta función resulta útil cuando se trabaja con aplicaciones de página única (SPA) o contenidos que se cargan de forma asíncrona.
¿Cómo buscar un elemento por ID?
La renderización espera un ID de elemento específico en el ejemplo de código siguiente.
: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);¿Cómo espero un atributo de elemento por nombre?
El proceso de renderización espera un nombre de elemento específico en el siguiente ejemplo de código.
: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);¿Cómo buscar elementos por nombre de etiqueta?
El proceso de renderización espera un nombre de etiqueta de elemento específico en el ejemplo de código siguiente.
: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);¿Cómo utilizar selectores de consulta para esperar elementos?
El proceso de renderización espera el elemento seleccionado por el selector de consulta en el siguiente ejemplo de código. El método HtmlQuerySelector espera una etiqueta img con un id de 'myid' y una class 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);¿Cómo puedo esperar a que se complete la actividad de red?
Al renderizar páginas web que realicen solicitudes de red para recursos, datos o llamadas a API, asegúrese de que toda la actividad de red finaliza antes de generar el PDF. IronPDF ofrece varios métodos para manejar diferentes escenarios de red.
¿Cuándo debo esperar a que no haya actividad en la red?
Este tipo de inactividad de red espera hasta que no hay actividad en la red, lo que suele indicar que el contenido se ha cargado por completo. Esto es adecuado para aplicaciones de una sola página (SPA) o páginas web sencillas sin solicitudes de red de larga duración o actividad de red continua.
El proceso de renderización comienza una vez que no ha habido actividad en la 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>");¿Cuándo debo permitir dos actividades en red?
El método NetworkIdle2 es adecuado para aplicaciones web o páginas web con peticiones de red de larga duración o pings heartbeat. Normalmente se trata de 1-2 solicitudes. Aunque estas solicitudes sean continuas, no invalidarán la activación del evento de inactividad de la red, ya que tener como máximo dos es aceptable.
Antes de iniciar el proceso de renderización, debería haber un máximo de dos actividades de red restantes durante al menos 500ms. 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>");¿Cómo personalizo los umbrales de actividad de red?
Cuando hay varias solicitudes de red implicadas, puede personalizar tanto la duración de inactividad de red como el número de solicitudes de red permitidas que no invalidan el evento de inactividad de red. Esta opción es adecuada para aplicaciones o páginas web con requisitos específicos que no se ajustan a los dos métodos anteriores. Esta personalización aborda 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>");Este nivel de personalización es valioso cuando se trabaja con aplicaciones web complejas que mantienen conexiones persistentes o tienen patrones predecibles de actividad de red en segundo plano.
¿Cómo puedo establecer un tiempo máximo de espera?
Los métodos JavaScript, NetworkIdle, NetworkIdle0 y NetworkIdle2 permiten establecer un tiempo de espera máximo para garantizar que la espera no será indefinida. El parámetro maxWaitTime de estos métodos sirve para este propósito. Esto evita que su aplicación se cuelgue indefinidamente si nunca se dan las condiciones esperadas.
Todos los valores de tiempo especificados están en milisegundos.
Al aplicar estas estrategias de espera, hay que equilibrar la carga completa del contenido con el mantenimiento de un rendimiento razonable. Para las aplicaciones que requieren un control preciso de los tiempos, explore técnicas de generación de PDF asíncronos.
¿Listo para ver qué más puedes hacer? Consulta la página del tutorial aquí: Características adicionales o explore crear PDF con IronPDF para conocer técnicas más avanzadas.
Preguntas Frecuentes
¿Qué es la clase WaitFor y por qué debería utilizarla?
La clase WaitFor de IronPDF permite a los desarrolladores retrasar la renderización del PDF hasta que todos los recursos, fuentes y JavaScript hayan terminado de cargarse. De este modo, se evitan las renderizaciones incompletas y se garantiza que las páginas web complejas se carguen por completo antes de convertirlas a PDF, lo que se traduce en documentos PDF más precisos y completos.
¿Cuáles son las diferentes opciones de WaitFor disponibles?
La clase WaitFor de IronPDF ofrece varias opciones: PageLoad (renderización inmediata por defecto), RenderDelay (retardo personalizado en milisegundos), Fonts (espera a que se carguen todas las fuentes), JavaScript (activa la renderización mediante una función JavaScript), HTML elements (espera a elementos específicos por ID, nombre, etiqueta o selector de consulta) y NetworkIdle (espera a que cese la actividad de la red).
¿Cómo añado un retardo personalizado antes de la renderización del PDF?
Puede añadir un retraso personalizado utilizando el método RenderDelay en IronPDF. Simplemente especifique el retardo en milisegundos: new ChromePdfRenderer { RenderingOptions = { WaitFor = WaitFor.RenderDelay(3000) } }`. Esto es particularmente útil para el contenido de JavaScript-pesado que necesita tiempo extra para ejecutarse.
¿Puedo esperar a que se carguen determinados elementos HTML antes de renderizarlos?
Sí, IronPDF le permite esperar elementos HTML específicos utilizando ID de elementos, nombres, nombres de etiquetas o selectores de consulta. Esto garantiza que el contenido crítico esté presente en la página antes de que comience la conversión a PDF, evitando que falten elementos en su documento PDF final.
¿Qué es NetworkIdle y cuándo debería usarlo?
NetworkIdle en IronPDF espera a que cese la actividad de la red antes de renderizar el PDF. Puede configurarlo para que espere 0, 2 o un número personalizado de conexiones de red. Esto es ideal para páginas que cargan contenido dinámicamente a través de llamadas AJAX u otras solicitudes de red asíncronas.
¿Cómo puedo activar la renderización de PDF desde JavaScript?
La opción WaitFor JavaScript de IronPDF le permite activar el proceso de renderizado desde una función JavaScript. Esto le da un control completo sobre cuándo se produce la generación de PDF, por lo que es perfecto para aplicaciones de una sola página o sitios web complejos basados en JavaScript en los que necesita un control preciso del tiempo.
Comience gratis
Comience gratis
Reserve demostración en vivo gratis
No se requiere tarjeta de crédito ni creación de cuenta
