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

How to use JavaScript with HTML to PDF

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

JavaScript is a high-level, versatile programming language commonly used in web development. It allows developers to add interactive and dynamic features to websites. jQuery, on the other hand, is not a separate programming language but rather a JavaScript library designed to simplify common tasks in JavaScript, such as DOM manipulation, event handling, and AJAX requests.

IronPDF supports JavaScript efficiently via the Chromium rendering engine. In this article, we'll demonstrate how to use JavaScript and jQuery in HTML to PDF conversion in .NET C# projects. IronPDF provides a free trial of IronPDF for exploration.

Quickstart: Convert HTML with JavaScript to PDF in .NET)

Easily convert HTML pages that include JavaScript to PDF using IronPDF in your .NET projects. With IronPDF's support for the Chromium rendering engine, you can ensure that all JavaScript elements are accurately processed. This quick example shows how to render a web page to PDF, allowing you to integrate dynamic content effortlessly. Just a single method call is needed to render and save your PDF document.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    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. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

as-heading:3(Overview: Minimal Workflow (5 Steps)

  1. Download the C# library: Convert HTML to PDF
  2. Enable JavaScript execution: Use the EnableJavaScript property.
  3. Render from HTML to PDF: Ensure your JavaScript code is fully supported.
  4. Execute custom JavaScript: Within your .NET C# code.
  5. Capture console messages: Using a JavaScript message listener.

Render JavaScript Example

JavaScript functionalities in HTML are supported when converting from HTML to PDF. As rendering happens without delay, JavaScript might not be executed properly. In most cases, it is advised to configure the WaitFor class in rendering options to allow JavaScript time to execute properly. In the following code, WaitFor.JavaScript is used to specify a maximum wait time of 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")
$vbLabelText   $csharpLabel

Some very complex JavaScript frameworks might not always work 100% with IronPDF and .NET due to limited allocation of memory for JavaScript execution.

Execute Custom JavaScript Example

The JavaScript property in rendering options is used to execute custom JavaScript before rendering HTML to PDF. This is very useful when rendering from a URL where it is not possible to inject JavaScript code. Simply assign a JavaScript code to the JavaScript property of the rendering options.

: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

JavaScript Message Listener Example

IronPDF allows you to listen to the JavaScript messages that have been logged to the console. Both error logs and custom log messages will be captured by the library. Utilize the JavascriptMessageListener property to capture these messages. The code example below demonstrates logging custom text and errors.

: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

Console window

Charting with JavaScript & IronPDF

D3.js is a perfect fit for IronPDF when you want to create charts or images. D3.js, known as Data-Driven Documents, is a JavaScript library for creating dynamic, interactive data visualizations in web browsers using Scalable Vector Graphics (SVG) in HTML5 and Cascading Style Sheets (CSS3).

To create a chart using D3.js and then convert it into a PDF document using IronPDF, follow this process:

  • Create a renderer object.
  • Set JavaScript and CSS properties.
  • Use the RenderHTMLFileAsPdf method to read an HTML file.
  • Save it as a 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

Output PDF

Explore more WaitFor options, such as those for fonts, JavaScript, HTML elements, and network idle at 'How to Use the WaitFor Class to Delay C# PDF Rendering.'

AngularJS HTML to PDF

AngularJS is a JavaScript-based open-source front-end web framework. It simplifies the development and testing of single-page applications using client-side model–view–controller (MVC) and model–view–view model (MVVM) architectures.

For full compatibility, consider using server-side rendering (SSR) together with Angular Universal.

Server-side rendering (SSR) with Angular Universal

Angular vs. Angular Universal

A typical Angular application runs in the browser (client-side), rendering pages in the DOM (Document Object Model) based on user actions. Angular Universal runs on the server (server-side) and generates static pages that are bootstrapped on the client. This improves loading time and allows users to view the layout before it becomes fully interactive.

Preguntas Frecuentes

¿Cómo puedo convertir HTML con JavaScript a PDF en una aplicación .NET?

Puedes usar el método `RenderHtmlAsPdf` de IronPDF para convertir contenido HTML con JavaScript en PDFs. Al habilitar la ejecución de JavaScript en las opciones de renderizado, puedes asegurarte de que el contenido dinámico se procese correctamente durante la conversión.

¿Qué pasos son necesarios para habilitar la ejecución de JavaScript en la conversión de HTML a PDF?

Para habilitar la ejecución de JavaScript en IronPDF, establece la propiedad `EnableJavaScript` en `true` dentro de las opciones de renderizado. Esto permite que la conversión a PDF procese cualquier JavaScript presente en el HTML.

¿Cómo puedo asegurarme de que mi código JavaScript se ejecute antes de convertir HTML a PDF?

Usa la clase `WaitFor` en IronPDF para configurar las opciones de renderizado y especificar el tiempo máximo de espera para la ejecución de JavaScript. Esto asegura que todos los scripts se ejecuten antes de que se genere el PDF, generalmente estableciendo un tiempo de espera de 500 ms.

¿Es posible capturar mensajes de consola de JavaScript durante la conversión de HTML a PDF?

Sí, puedes capturar mensajes de consola de JavaScript usando la propiedad `JavascriptMessageListener` de IronPDF. Esta función te permite depurar y registrar mensajes de la consola durante el proceso de renderizado del PDF.

¿Puede IronPDF renderizar gráficos creados con bibliotecas JavaScript como D3.js?

Sí, IronPDF puede renderizar gráficos creados con D3.js habilitando la ejecución de JavaScript en las opciones de renderizado y utilizando métodos como `RenderHtmlFileAsPdf` para convertir archivos HTML que contienen scripts de gráficos en PDFs.

¿Cuáles son algunos de los desafíos potenciales al usar JavaScript con la conversión de HTML a PDF?

Algunos marcos de JavaScript complejos podrían encontrar problemas con IronPDF debido a las restricciones de asignación de memoria durante la ejecución de JavaScript. Se recomienda probar y optimizar los scripts para asegurar la compatibilidad.

¿Cómo beneficia la renderización del lado del servidor con Angular Universal a la conversión de HTML a PDF?

Usar Angular Universal para la renderización del lado del servidor puede mejorar el rendimiento al pre-renderizar páginas en el servidor. Esto mejora los tiempos de carga y la compatibilidad, permitiendo que IronPDF convierta estas páginas a PDF de manera efectiva.

¿Cómo puedo ejecutar JavaScript personalizado dentro de un proceso de conversión de HTML a PDF en .NET?

JavaScript personalizado puede ser ejecutado estableciendo el código JavaScript en la propiedad `JavaScript` de las opciones de renderizado. Esto permite que los scripts se ejecuten durante el proceso de conversión en IronPDF.

¿Cuál es un enfoque recomendado para manejar páginas con gran cantidad de JavaScript en la conversión a PDF?

Para páginas con gran cantidad de JavaScript, considera usar técnicas de renderización del lado del servidor como Angular Universal para pre-renderizar el contenido, asegurándote de que esté completamente procesado antes de usar IronPDF para la conversión. Esto ayuda a gestionar problemas de rendimiento y memoria.

¿Cómo soporta IronPDF la conversión de HTML con contenido dinámico?

IronPDF soporta la conversión de HTML con contenido dinámico aprovechando el motor de renderizado Chromium. Esto permite la ejecución de JavaScript y jQuery, asegurando que los elementos interactivos se preserven en el resultado en PDF.

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,154,058 | Versión: 2025.11 recién lanzado