Render JavaScript in .NET for HTML to PDF Generation

IronPDF supports JavaScript quite nicely via the Chromium rendering engine. In this article we'll show you how to use JavaScript and jQuery in HTML to PDF conversion in .NET projects.

How to Convert HTML to PDF in Javascript

Download the C# library to convert HTML to PDF
Set the EnableJavaScript property to true in order to enable JavaScript functionality
Allow the execution of JavaScript by setting the RenderDelay property
Improve element layout by switching the CssMediaType property to Print
Save the PDF document using the SaveAs method

Step 1

1. Get IronPDF

If you're looking to use JavaScript and jQuery in HTML to PDF conversion for a .NET project, then IronPDF is a great source for simple code, which is free for development.

Download the ZIP or you can use NuGet Package Manager.

 PM > Install-Package IronPdf

How to Tutorial

2. JavaScript and IronPDF

IronPDF supports JavaScript. One caveat is that you may have to add a delay to a page render to allow JavaScript time to execute. This is done by using the following few lines of code:

/**
Allow JavaScript Execution Time
anchor-javascript-and-ironpdf
**/
Renderer.RenderingOptions.EnableJavaScript = true;

Renderer.RenderingOptions.RenderDelay = 500; //milliseconds

/**
Allow JavaScript Execution Time
anchor-javascript-and-ironpdf
**/
Renderer.RenderingOptions.EnableJavaScript = true;

Renderer.RenderingOptions.RenderDelay = 500; //milliseconds

'''
'''Allow JavaScript Execution Time
'''anchor-javascript-and-ironpdf
'''*
Renderer.RenderingOptions.EnableJavaScript = True

Renderer.RenderingOptions.RenderDelay = 500 'milliseconds

VB C#

3. JavaScript Frameworks

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

4. Angular JS HTML to PDF

According to Wikipedia:

AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view model (MVVM) architectures, along with components commonly used in rich Internet applications.

Angular should, however, be used with care. It is better to rely on Server-side rendering (SSR) with Angular Universal for full compatibility.

5. Server-side rendering (SSR) with Angular Universal

5.1. Angular vs. Angular Universal

A regular Angular application executes in the browser (client side). It renders pages in the DOM (Document Object Model) based on user actions.

Angular Universal executes on the server (server-side). This generates static pages that later get bootstrapped on the client. This causes the Angular application(s) to render quicker and gives the users a chance to view the application layout before it becomes fully interactive.

6. Charting with JavaScript & IronPDF

D3.js is a perfect fit for IronPDF when wanting to do any charting or imaging.

D3.js or, simply D3, stands for Data-Driven Documents. It is a JavaScript library that helps in creating dynamic, interactive data visualizations in web browsers. D3 makes use of 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, use code similar to the following:

/**
D3js Chart to PDF
anchor-charting-with-javascript-ironpdf
**/
    private void HTMLD3Chart()

    {

      var Renderer = new IronPdf.ChromePdfRenderer();

      Renderer.RenderingOptions.EnableJavaScript = true;

      Renderer.RenderingOptions.RenderDelay = 500;

      Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

      using var PDF = Renderer.RenderHTMLFileAsPdf("Chart.html");

      var OutputPath = "HTMLD3Chart.pdf";

      PDF.SaveAs(OutputPath);

    }

/**
D3js Chart to PDF
anchor-charting-with-javascript-ironpdf
**/
    private void HTMLD3Chart()

    {

      var Renderer = new IronPdf.ChromePdfRenderer();

      Renderer.RenderingOptions.EnableJavaScript = true;

      Renderer.RenderingOptions.RenderDelay = 500;

      Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

      using var PDF = Renderer.RenderHTMLFileAsPdf("Chart.html");

      var OutputPath = "HTMLD3Chart.pdf";

      PDF.SaveAs(OutputPath);

    }

'''
'''D3js Chart to PDF
'''anchor-charting-with-javascript-ironpdf
'''*
 Private Sub HTMLD3Chart()

 var Renderer = New IronPdf.ChromePdfRenderer()

 Renderer.RenderingOptions.EnableJavaScript = True

 Renderer.RenderingOptions.RenderDelay = 500

 Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

 var PDF = Renderer.RenderHTMLFileAsPdf("Chart.html")

 var OutputPath = "HTMLD3Chart.pdf"

 PDF.SaveAs(OutputPath)

'INSTANT VB TODO TASK: The following line uses invalid syntax:
' }

VB C#

7. Render HTML to PDF

Create a renderer object and specify that you would like to render HTML.
Set the JavaScript and CSS properties.
Make use of the RenderHTMLFileAsPdf method of the IronPDF library to read an HTML file (web page)
Then you simply save it as PDF.

The HTML for the above code segment is shown next. Type this into a Text editor of your choice and save it as an HTML file.

/**
Render HTML to PDF
anchor-render-html-to-pdf
**/

<!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>

/**
Render HTML to PDF
anchor-render-html-to-pdf
**/

<!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>

'''
'''Render HTML to PDF
'''anchor-render-html-to-pdf
'''*

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'<!DOCTYPE html> (Of html) (Of head) <meta charset="utf-8" /> (Of title) C3 Bar Chart</title> </head> (Of 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> (Of script) @Function.prototype.bind = @Function.prototype.bind || @function(thisp)
'{
'
'var fn = Me;
'
'Return @function()
'{
'
'Return fn.apply(thisp, arguments);
'
'};
'
'};

Dim chart = c3.generate({ bindto: '#chart', data: { columns: [['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25]] } });

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</script> </body> </html>

VB C#