1. IronPDF
  2. Guías
  3. JavaScript (Retrasos de renderizado)
Cómo usar Java Script con HTML a PDF usando C#

Cómo utilizar JavaScript con HTML to PDF en C#

Curtis Chau
Curtis Chau
Actualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

<Descripción: Diagrama o captura de pantalla que ilustre el concepto de código -->

IronPDF permite la ejecución de JavaScript durante la conversión de HTML a PDF utilizando su motor de renderizado Chromium. Convierta contenido web dinámico, incluidos JavaScript y jQuery, en documentos PDF en aplicaciones .NET C# compatibles con elementos interactivos y renderización dinámica.

JavaScript es un lenguaje de programación versátil y de alto nivel utilizado en el desarrollo web. Permiten funciones interactivas y dinámicas en los sitios web. jQuery es una biblioteca de JavaScript que simplifica tareas comunes como la manipulación del DOM, la gestión de eventos y las peticiones AJAX.

IronPDF es compatible con JavaScript a través del motor de renderizado Chromium. Este artículo muestra cómo utilizar JavaScript y jQuery en la conversión de HTML a PDF en proyectos .NET C#. IronPDF ofrece una prueba gratuita de IronPDF para realizar pruebas. Para depurar HTML antes de la conversión, consulte nuestra guía sobre depuración de HTML con Chrome.

como-título:2(Inicio rápido: Convertir HTML con JavaScript a PDF en .NET)

Convierta páginas HTML que incluyan JavaScript a PDF utilizando IronPDF en proyectos .NET. Gracias a la compatibilidad con el motor de renderizado Chromium, todos los elementos de JavaScript se procesan con precisión. Este ejemplo muestra cómo convertir una página web a PDF con contenido dinámico. Una única llamada a un método renderiza y guarda el documento PDF.

Nuget IconEmpieza a crear PDF con NuGet ahora:

  1. Instalar IronPDF con el gestor de paquetes NuGet

    PM > Install-Package IronPdf

  2. Copie y ejecute este fragmento de código.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.pdf");

  3. Despliegue para probar en su entorno real

    Empieza a utilizar IronPDF en tu proyecto hoy mismo con una prueba gratuita
    arrow pointer

¿Cómo configuro el flujo de trabajo básico?

  1. Descargue la biblioteca de C#: Convertir HTML a PDF
  2. Habilitar la ejecución de JavaScript: Utilice la propiedad EnableJavaScript
  3. Renderización de HTML a PDF: Asegúrese de que el código JavaScript es compatible
  4. Ejecutar JavaScript personalizado: Dentro de su código .NET C#
  5. Capturar mensajes de consola: El uso de un receptor de mensajes JavaScript

¿Cómo renderizo JavaScript al convertir HTML a PDF?

Se admite JavaScript en HTML al convertir a PDF. Dado que la renderización es inmediata, es posible que JavaScript no se ejecute correctamente. Configure la clase WaitFor en las opciones de renderizado para permitir el tiempo de ejecución de JavaScript. El siguiente código utiliza WaitFor.JavaScript con un tiempo de espera máximo de 500 ms. Para obtener más información sobre tiempos de espera y retrasos de renderización, consulte nuestra guía sobre utilización de WaitFor para retrasar la renderización de PDF.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-javascript.cs
using IronPdf;

string htmlWithJavaScript = @"<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript);

// Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf");
Imports IronPdf

Private htmlWithJavaScript As String = "<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript)

' Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf")
$vbLabelText   $csharpLabel

¿Por qué es importante WaitFor para la ejecución de JavaScript?

Los marcos de JavaScript complejos pueden requerir ajustes de asignación de memoria debido a la limitada memoria de ejecución de JavaScript en .NET. WaitFor ofrece opciones para garantizar la ejecución completa de JavaScript antes de la generación del PDF. Espera a la ejecución de JavaScript, estados de inactividad de la red, elementos HTML o retrasos de renderización personalizados. Conozca las opciones de renderización disponibles para optimizar la generación de PDF.

¿Cuándo debo utilizar el método notifyRender?

El método window.ironpdf.notifyRender() indica que se ha completado la ejecución de JavaScript, lo que garantiza un tiempo de renderización adecuado para el contenido dinámico. Utilícelo para operaciones asíncronas o animaciones que deban completarse antes de la generación del PDF. El método funciona con la configuración WaitFor.JavaScript para un control preciso de la renderización.

¿Cuáles son los problemas comunes de renderizado de JavaScript?

Los frameworks complejos pueden necesitar tiempo de espera adicional o asignación de memoria. Los problemas comunes incluyen:

  • Los datos asíncronos no se cargan antes de la renderización
  • Animaciones CSS capturadas en plena transición
  • Errores de JavaScript que impiden la visualización
  • Limitaciones de memoria con frameworks pesados

Para la resolución de problemas, active registro personalizado para capturar los detalles del proceso de renderizado.

¿Cómo puedo ejecutar JavaScript personalizado antes de renderizar el PDF?

Utilice la propiedad JavaScript en las opciones de representación para ejecutar JavaScript personalizado antes de la representación. Esto ayuda a la hora de renderizar URL en las que no es posible inyectar JavaScript. Asigne código JavaScript a la propiedad JavaScript de las opciones de representación. Combínalo con async PDF generation para procesar varios documentos.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// JavaScript code
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

pdf.SaveAs("executed_js.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' JavaScript code
renderer.RenderingOptions.Javascript = "
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")

pdf.SaveAs("executed_js.pdf")
$vbLabelText   $csharpLabel

¿Cuándo debo utilizar la inyección personalizada de JavaScript?

La inyección personalizada de JavaScript funciona al renderizar URL en las que no es posible modificar el HTML de origen. Usos comunes:

  • Modificación de páginas de terceros antes de la conversión
  • Añadir marcas de agua o cabeceras dinámicas
  • Ocultar o mostrar elementos de forma condicional
  • Ajuste de estilos para diseños de impresión
  • Extracción y reorganización de contenidos

¿Qué tipos de manipulación del DOM puedo realizar?

Modificar estilos, añadir elementos, cambiar el contenido o realizar operaciones DOM estándar antes de la renderización. Ejemplos:

  • Cambiar las propiedades CSS para el formato de impresión
  • Eliminar elementos de navegación o anuncios
  • Añadir números de página o encabezados personalizados
  • Reestructurar el diseño del contenido
  • Inyectar datos o metadatos adicionales

¿Cómo capturar los mensajes de la consola JavaScript durante la generación de un PDF?

IronPDF captura los mensajes de la consola de JavaScript, incluidos los registros de errores y los mensajes personalizados. Utilice la propiedad JavascriptMessageListener para capturar mensajes. Este ejemplo muestra el registro de texto personalizado y errores.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs
using IronPdf;
using System;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
// Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// Error will be logged
// message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render HTML to PDF
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
Imports IronPdf
Imports System

Private renderer As New ChromePdfRenderer()

' Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
' Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

'--------------------------------------------------//
' Error will be logged
' message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

' Render HTML to PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
$vbLabelText   $csharpLabel

La consola de depuración muestra TypeError: Cannot read properties of null (reading 'style') with console output

¿Por qué debo supervisar los mensajes de la consola de JavaScript?

La supervisión de la consola ayuda a depurar errores de JavaScript y a realizar un seguimiento de la ejecución durante la generación de PDF. Imprescindible para:

  • Identificación de errores de JavaScript que impiden la renderización
  • Seguimiento del progreso de operaciones complejas en JavaScript
  • Depuración de problemas de sincronización de código asíncrono
  • Validación de la ejecución personalizada de JavaScript
  • Recopilación de métricas de rendimiento de JavaScript

¿Qué tipos de mensajes se pueden capturar?

El oyente captura mensajes personalizados de console.log y errores de JavaScript, entre otros:

  • Salidas de consola: log(), info(), warn(), error()
  • Excepciones no detectadas y errores de ejecución
  • Errores de red por recursos fallidos
  • Avisos de depreciación del motor del navegador
  • Información de depuración personalizada

¿Cómo crear gráficos con bibliotecas JavaScript como D3.js?

<Descripción: Diagrama o captura de pantalla que ilustre el concepto de código -->

D3.js funciona bien con IronPDF para crear gráficos o imágenes. D3.js (Data-Driven Documents) es una biblioteca JavaScript para visualizaciones de datos dinámicas e interactivas que utiliza SVG en HTML5 y CSS3. Consulte nuestra guía sobre representación de gráficos en PDF para ver más ejemplos de bibliotecas de gráficos.

Para crear un gráfico D3.js y convertirlo a PDF:

  • Crear un objeto renderizador
  • Establecer propiedades JavaScript y CSS
  • Utilice RenderHTMLFileAsPdf para leer HTML
  • Guardar como PDF
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs
using IronPdf;

string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Export PDF
pdfJavaScript.SaveAs("renderChart.pdf");
Imports IronPdf

Private html As String = "
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

' Export PDF
pdfJavaScript.SaveAs("renderChart.pdf")
$vbLabelText   $csharpLabel

¿Qué bibliotecas de gráficos funcionan mejor con IronPDF?

Bibliotecas de gráficos JavaScript compatibles con IronPDF:

  • Chart.js: Ligero para gráficos básicos
  • Highcharts: Gráficos profesionales con personalización
  • D3.js: Máxima flexibilidad para las visualizaciones
  • C3.js: Gráficos reutilizables basados en D3
  • ApexCharts: Gráficos modernos con rendimiento

El éxito requiere la finalización de la representación gráfica antes de la generación del PDF utilizando estrategias de espera adecuadas.

¿Cuándo debo ajustar los tiempos de espera para la representación de gráficos?

Los gráficos complejos con animaciones o grandes conjuntos de datos requieren tiempos de espera más largos. A tener en cuenta:

  • El volumen de datos afecta al tiempo de procesamiento
  • La duración de la animación debe completar
  • Solicitudes de red para datos asíncronos
  • La complejidad del gráfico aumenta el procesamiento

¿Cómo puedo solucionar problemas de representación de gráficos?

Consulte 'Cómo utilizar la clase WaitFor para retrasar la renderización de PDF en C#' para obtener más opciones de WaitFor. Pasos para la resolución de problemas:

  1. Aumentar el tiempo de espera de JavaScript
  2. Utilice WaitFor.NetworkIdle() para la carga asíncrona
  3. Desactivar animaciones para salida PDF
  4. Comprobar errores de JavaScript en la consola
  5. Pruebe primero el HTML en el navegador

¿Cómo convierto aplicaciones AngularJS a PDF?

AngularJS es un marco de trabajo de código abierto basado en JavaScript. Simplifica el desarrollo de aplicaciones de una sola página utilizando arquitecturas MVC y MVVM del lado del cliente. Consulte nuestro Ejemplo de código de Angular a PDF para obtener más información.

Por motivos de compatibilidad, utilice la renderización del lado del servidor (SSR) con Angular Universal. Las aplicaciones de una sola página (SPA) requieren un tratamiento especial debido a la generación de contenido dinámico tras la carga inicial.

¿Por qué es importante el renderizado del lado del servidor para los PDF de Angular?

Es posible que Angular del lado del cliente no se muestre correctamente sin SSR debido a la dependencia de JavaScript del navegador. Desafíos:

  • HTML inicial mínimo con contenido dinámico
  • Enrutamiento del lado del cliente no en HTML estático
  • Vinculación de datos tras la carga de la página
  • Llamadas a la API incompletas antes de la generación del PDF

¿Cuáles son las limitaciones de Client-Side Angular?

El contenido dinámico después de la carga inicial puede no capturarse sin una configuración de espera adecuada. Limitaciones:

  • Componentes de carga asíncrona
  • Módulos y rutas lazy-loaded
  • Animaciones y transiciones
  • Formularios e interacciones dinámicas
  • Actualización de datos en tiempo real

Utilice tiempos de espera más largos o implemente window.ironpdf.notifyRender() en su aplicación Angular.

¿Cómo funciona el renderizado del lado del servidor con Angular Universal?

¿Cuál es la diferencia entre Angular y Angular Universal?

Angular se ejecuta del lado del cliente en el navegador, renderizando páginas en el DOM en función de las acciones del usuario. Angular Universal se ejecuta del lado del servidor, generando páginas estáticas arrancadas en el cliente. Esto mejora la carga y permite la visualización del diseño antes de la interactividad completa.

Diferencias en la generación de PDF:

  • Angular: Requiere la ejecución de JavaScript
  • Angular Universal: Proporciona HTML pre-renderizado
  • Rendimiento: Universal renderiza más rápido
  • Fiabilidad: Universal garantiza la disponibilidad de los contenidos

¿Cuándo debería elegir Angular Universal para la generación de PDF?

Utiliza Angular Universal para garantizar la representación de contenidos dinámicos sin dependencia de JavaScript del lado del cliente. Ideal para:

  • Informes con datos de API
  • Documentos que necesitan un formato coherente
  • Generación de PDF de gran volumen
  • Aplicaciones Angular complejas
  • Problemas de tiempo de espera de ejecución de JavaScript

Angular Universal garantiza la renderización del lado del servidor antes de la conversión de IronPDF, lo que elimina los problemas de sincronización y mejora la fiabilidad.

Preguntas Frecuentes

¿Cómo puedo activar JavaScript al convertir HTML a PDF en C#?

Para habilitar JavaScript en IronPDF, establezca la propiedad EnableJavaScript en true en las opciones de renderizado: new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }. Esto permite que el motor Chromium de IronPDF ejecute JavaScript durante el proceso de conversión.

¿Qué bibliotecas de JavaScript son compatibles con la conversión de PDF?

IronPDF es compatible con todas las bibliotecas de JavaScript, incluidas jQuery, React, Vue.js y Angular, a través de su motor de renderizado Chromium. La biblioteca puede procesar la manipulación del DOM, las solicitudes AJAX y la generación de contenido dinámico como lo haría un navegador web moderno.

¿Cómo se gestiona el tiempo de ejecución de JavaScript en la generación de PDF?

Utilice la clase WaitFor en las opciones de renderizado de IronPDF para controlar el tiempo de ejecución de JavaScript. Puede utilizar WaitFor.JavaScript() con un tiempo de espera máximo (por ejemplo, 500 ms) para garantizar que JavaScript se complete antes de la generación del PDF: WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

¿Puedo ejecutar código JavaScript personalizado durante la conversión de HTML a PDF?

Sí, IronPDF le permite ejecutar código JavaScript personalizado dentro de su aplicación .NET C# durante el proceso de conversión. Puede inyectar JavaScript directamente en la cadena HTML o utilizar las opciones de renderización para ejecutar scripts personalizados.

¿Cómo puedo capturar los mensajes de la consola JavaScript durante la renderización de un PDF?

IronPDF proporciona una función de escucha de mensajes de JavaScript que permite capturar mensajes console.log y otras salidas de JavaScript durante el proceso de representación de PDF. Esto resulta útil para depurar la ejecución de JavaScript.

¿Qué motor de renderizado utiliza la biblioteca para el soporte de JavaScript?

IronPDF utiliza el motor de renderizado Chromium, el mismo motor que utiliza Google Chrome. Esto garantiza una compatibilidad total con JavaScript y una representación precisa de las tecnologías web modernas en sus documentos PDF.

¿Existe una versión de prueba gratuita para probar la conversión de JavaScript a PDF?

Sí, IronPDF ofrece una versión de prueba gratuita que incluye compatibilidad total con JavaScript. Puede probar todas las funciones, incluida la ejecución de JavaScript, el renderizado jQuery y la generación de contenido dinámico antes de adquirir una licencia.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 16,685,821 | Versión: 2025.12 recién lanzado