1. IronPDF
  2. How-Tos
  3. JavaScript (Custom Render Delays)

How to use JavaScript with HTML to PDF

Chaknith Bin
Chaknith Bin
Updated:

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.

Get started with IronPDF

Start using IronPDF in your project today with a free trial.

First Step:
green arrow pointer

How to Use JavaScript with HTML to PDF

  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.

Frequently Asked Questions

What is this .NET library used for converting HTML to PDF, including executing JavaScript?

IronPDF is a .NET library that supports converting HTML to PDF, including the execution of JavaScript and jQuery, using the Chromium rendering engine.

How can I enable JavaScript execution in this .NET PDF conversion library?

JavaScript execution can be enabled in IronPDF by setting the `EnableJavaScript` property in the rendering options.

What is the purpose of configuring rendering options for JavaScript execution in a .NET library?

The WaitFor class in IronPDF is used to configure rendering options to allow JavaScript time to execute properly, ensuring that all scripts are run before the PDF is generated.

Can this .NET library capture JavaScript console messages during PDF conversion?

Yes, IronPDF can capture JavaScript console messages using the `JavascriptMessageListener` property.

How does this .NET library interact with D3.js for rendering charts?

IronPDF can render charts created with D3.js by enabling JavaScript in the rendering options and using the `RenderHtmlFileAsPdf` method.

What are some limitations of using JavaScript with this .NET PDF conversion tool?

Some complex JavaScript frameworks might not work perfectly with IronPDF due to limited memory allocation for JavaScript execution.

What is the benefit of using Angular Universal with this .NET PDF conversion library?

Angular Universal improves loading times and allows users to view layouts before they become fully interactive, ensuring better performance and compatibility when rendering with IronPDF.

How can I execute custom JavaScript when using a .NET library for converting HTML to PDF?

Custom JavaScript can be executed by assigning the JavaScript code to the `JavaScript` property in the rendering options before rendering HTML to PDF.

What is the recommended wait time for JavaScript execution in this .NET PDF library?

While configuring the WaitFor class, a typical maximum wait time for JavaScript execution is 500 ms to ensure proper execution before rendering.

How can server-side rendering benefit an AngularJS application using this .NET PDF conversion library?

Server-side rendering with Angular Universal can enhance an AngularJS application's performance by pre-rendering pages on the server, thus improving load times and enabling IronPDF to effectively convert these pages to PDF.

Chaknith Bin
Chaknith Bin
  Chat with engineering team now
Software Engineer
Chaknith works on IronXL and IronBarcode. He has deep expertise in C# and .NET, helping improve the software and support customers. His insights from user interactions contribute to better products, documentation, and overall experience.
Talk to an Expert Five Star Trust Score Rating

Ready to Get Started?

Nuget Passed
Free NuGet Download Total downloads: 14,631,247
View Licenses