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
- Descargar la biblioteca de C# para convertir HTML a PDF
- Habilite la ejecución de JavaScript con la opción Activar JavaScript propiedad
- Renderizado de HTML a PDF con código JavaScript totalmente compatible
- Ejecutar código JavaScript personalizado en .NET C#
- Escuchar y capturar mensajes de consola de JavaScript
Instalar con NuGet
Install-Package IronPdf
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>";
// 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")
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")
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>")
![Ventana de la consola](/static-assets/pdf/how-to/javascript-to-pdf/console.webp)
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>
";
// 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")
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.