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

Cómo utilizar JavaScript con HTML a PDF

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

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ónCromo 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 proporciona unprueba gratuita de IronPDF para exploración.

Comience con IronPDF

Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.

Primer Paso:
green arrow pointer

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

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 elClase WaitFor en las opciones de renderizado 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>";

// 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")
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();

// 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")
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();

// 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>")
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, significaDocumentos basados en datos. Es una biblioteca JavaScript que ayuda a crear visualizaciones de datos dinámicas e interactivas en navegadores web. D3 utilizaGráficos vectoriales escalables SVG enHTML5 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>
";

// 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")
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.