1. IronPDF
  2. Cómo Hacer
  3. JavaScript (Retardos de renderización personalizados)

Cómo utilizar JavaScript con HTML a PDF

JavaScript es un lenguaje de programación versátil y de alto nivel que se utiliza habitualmente en el desarrollo web. Permite a los desarrolladores añadir funciones interactivas y dinámicas a los sitios web. jQuery, por su parte, no es un lenguaje de programación independiente, sino una biblioteca JavaScript. Está diseñado para simplificar tareas comunes en JavaScript, como la manipulación del DOM, el manejo de eventos y las peticiones AJAX.

IronPDF admite JavaScript de forma eficaz a través de la función Cromo motor de renderizado. En este artículo, demostraremos cómo utilizar JavaScript y jQuery en la conversión de HTML a PDF en proyectos .NET C#. IronPDF ofrece prueba gratuita.

Cómo utilizar JavaScript con HTML a PDF

  1. Descargar la biblioteca de C# para convertir HTML a PDF
  2. Habilite la ejecución de JavaScript con la opción Activar JavaScript propiedad
  3. Renderizado de HTML a PDF con código JavaScript totalmente compatible
  4. Ejecutar código JavaScript personalizado en .NET C#
  5. Escuchar y capturar mensajes de consola de JavaScript

Biblioteca NuGet C# para PDF

Instalar con NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
o
Java PDF JAR

Descargar DLL

Descargar DLL

Instalar manualmente en su proyecto

Renderizar JavaScript Ejemplo

Las funciones de JavaScript en HTML son compatibles al convertir de HTML a PDF. Como la renderización se produce sin demora, es posible que JavaScript no se ejecute correctamente. En la mayoría de los casos, se aconseja configurar el Espere a en RenderingOptions para permitir que JavaScript se ejecute correctamente. En el siguiente código, he utilizado WaitFor.JavaScript y he especificado un tiempo de espera máximo de 500 ms.

: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>";

//  Instanciar renderizador
var renderer = new ChromePdfRenderer();

//  Activar JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
//  Establecer waitFor para JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

//  Renderizar HTML contiene JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript);

//  Exportar 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>"

'  Instanciar renderizador
Private renderer = New ChromePdfRenderer()

'  Activar JavaScript
renderer.RenderingOptions.EnableJavaScript = True
'  Establecer waitFor para JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

'  Renderizar HTML contiene JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript)

'  Exportar PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf")
VB   C#

Es posible que algunos marcos JavaScript muy complejos no siempre funcionen al 100% con IronPDF y .NET. Esto se debe principalmente a la asignación limitada de memoria para la ejecución de JavaScript.

Ejecutar JavaScript personalizado Ejemplo

La propiedad JavaScript de las opciones de renderizado se utiliza para ejecutar JavaScript personalizado antes de renderizar HTML a PDF. Esto es muy útil cuando se renderiza desde una URL en la que no es posible inyectar código JavaScript. Basta con asignar un código JavaScript a la propiedad JavaScript de las opciones de renderizado.

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

ChromePdfRenderer renderer = new ChromePdfRenderer();

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

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

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

Private renderer As New ChromePdfRenderer()

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

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

pdf.SaveAs("executed_js.pdf")
VB   C#

Ejemplo de receptor de mensajes JavaScript

IronPDF también le permite escuchar los mensajes JavaScript que se han registrado en la consola. Tanto los registros de errores como los mensajes de registro personalizados serán capturados por la biblioteca. Utiliza la propiedad JavascriptMessageListener para ello. El siguiente ejemplo de código muestra tanto el registro de texto personalizado como de errores.

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

ChromePdfRenderer renderer = new ChromePdfRenderer();

//  Método callback que se invocará cada vez que un mensaje de la consola del navegador esté disponible:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
//  Registrar 'foo' en la consola
renderer.RenderingOptions.Javascript = "console.log('foo');";

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

//--------------------------------------------------//
//  Se registrará el error
//  mensaje => Uncaught TypeError: No se pueden leer propiedades de null (leyendo 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

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

Private renderer As New ChromePdfRenderer()

'  Método callback que se invocará cada vez que un mensaje de la consola del navegador esté disponible:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
'  Registrar 'foo' en la consola
renderer.RenderingOptions.Javascript = "console.log('foo');"

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

'--------------------------------------------------//
'  Se registrará el error
'  mensaje => Uncaught TypeError: No se pueden leer propiedades de null (leyendo 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

'  Convertir HTML en PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
VB   C#
Ventana de la consola

Gráficos con JavaScript e IronPDF

D3.js se adapta perfectamente a IronPDF cuando desea crear gráficos o imágenes.

D3.js o, simplemente D3, significa Documentos basados en datos. Es una biblioteca JavaScript que ayuda a crear visualizaciones de datos dinámicas e interactivas en navegadores web. D3 utiliza Gráficos vectoriales escalables SVG en HTML5 y hojas de estilo en cascada (CSS3).

Para crear un gráfico utilizando D3.js y luego convertirlo en un documento PDF, utilice un código similar al siguiente:

  • Crea un objeto renderizador.
  • Establezca las propiedades JavaScript y CSS.
  • Utilice el método RenderHTMLFileAsPdf de la biblioteca IronPDF para leer un archivo HTML (página web).
  • Simplemente guárdelo 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>
";

//  Instanciar renderizador
var renderer = new ChromePdfRenderer();

//  Activar JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
//  Establecer waitFor para JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

//  Renderizar HTML contiene JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

//  Exportar 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>
"

'  Instanciar renderizador
Private renderer = New ChromePdfRenderer()

'  Activar JavaScript
renderer.RenderingOptions.EnableJavaScript = True
'  Establecer waitFor para JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

'  Renderizar HTML contiene JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

'  Exportar PDF
pdfJavaScript.SaveAs("renderChart.pdf")
VB   C#

Salida PDF

Explora más opciones WaitFor, como las de fuentes, JavaScript, elementos HTML y ralentí de red en 'Cómo Utilizar la Clase WaitFor para Retrasar el Renderizado de PDF en C#.'

Angular JS HTML a PDF

Según Wikipedia:

AngularJS es un framework web front-end de código abierto basado en JavaScript mantenido principalmente por Google y por una comunidad de particulares y empresas para hacer frente a muchos de los retos que plantea el desarrollo de aplicaciones de una sola página. Su objetivo es simplificar tanto el desarrollo como las pruebas de este tipo de aplicaciones, proporcionando un marco para el modelo-vista-controlador del lado del cliente. (MVC) y modelo-vista-modelo (MVVM) junto con componentes utilizados habitualmente en aplicaciones de Internet enriquecidas.

No obstante, Angular debe utilizarse con cuidado. Es mejor confiar en el renderizado del lado del servidor (SSR) con Angular Universal para una compatibilidad total.

Renderizado del lado del servidor (SSR) con Angular Universal

Angular frente a Angular Universal

Una aplicación Angular típica se ejecuta en el navegador (del lado del cliente). Renderiza páginas en el DOM (Modelo de documento objeto) en función de las acciones del usuario.

Angular Universal se ejecuta en el servidor (en el servidor). Genera páginas estáticas que posteriormente se arrancan en el cliente. El resultado es una renderización más rápida de la aplicación Angular(s) y permite a los usuarios ver el diseño de la aplicación antes de que sea totalmente interactiva.