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

How can I convert HTML with JavaScript to PDF in a .NET application?

You can use IronPDF's `RenderHtmlAsPdf` method to convert HTML content with JavaScript into PDFs. By enabling JavaScript execution in the rendering options, you can ensure that dynamic content is properly processed during the conversion.

What steps are necessary to enable JavaScript execution in HTML to PDF conversion?

To enable JavaScript execution in IronPDF, set the `EnableJavaScript` property to `true` within the rendering options. This allows the PDF conversion to process any JavaScript present in the HTML.

How can I ensure my JavaScript code executes before converting HTML to PDF?

Use the `WaitFor` class in IronPDF to configure the rendering options and specify the maximum wait time for JavaScript execution. This ensures that all scripts run before the PDF is generated, typically setting a wait time of 500 ms.

Is it possible to capture JavaScript console messages during HTML to PDF conversion?

Yes, you can capture JavaScript console messages using IronPDF's `JavascriptMessageListener` property. This feature allows you to debug and log console messages during the PDF rendering process.

Can IronPDF render charts created with JavaScript libraries like D3.js?

Yes, IronPDF can render charts created with D3.js by enabling JavaScript execution in the rendering options and using methods like `RenderHtmlFileAsPdf` to convert HTML files containing chart scripts into PDFs.

What are some potential challenges when using JavaScript with HTML to PDF conversion?

Some complex JavaScript frameworks might encounter issues with IronPDF due to memory allocation constraints during JavaScript execution. It is recommended to test and optimize scripts to ensure compatibility.

How does server-side rendering with Angular Universal benefit HTML to PDF conversion?

Using Angular Universal for server-side rendering can improve performance by pre-rendering pages on the server. This enhances loading times and compatibility, allowing IronPDF to effectively convert these pages to PDF.

How can I execute custom JavaScript within a .NET HTML to PDF conversion process?

Custom JavaScript can be executed by setting the JavaScript code in the `JavaScript` property of the rendering options. This allows the scripts to be run during the conversion process in IronPDF.

What is a recommended approach for handling JavaScript-heavy pages in PDF conversion?

For JavaScript-heavy pages, consider using server-side rendering techniques like Angular Universal to pre-render content, ensuring it is fully processed before using IronPDF for conversion. This helps manage performance and memory issues.

How does IronPDF support the conversion of HTML with dynamic content?

IronPDF supports the conversion of HTML with dynamic content by leveraging the Chromium rendering engine. This allows for the execution of JavaScript and jQuery, ensuring that interactive elements are preserved in the PDF output.

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: 15,080,714
View Licenses