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 converion in .NET projects.

Allow JavaScript Execution Time
Renderer.PrintOptions.EnableJavaScript = true;

Renderer.PrintOptions.RenderDelay = 500; //milliseconds
Renderer.PrintOptions.EnableJavaScript = True

Renderer.PrintOptions.RenderDelay = 500 'milliseconds
Jump to Article
D3js Chart to PDF
​    private void HTMLD3Chart()

​    {

​      var Renderer = new IronPdf.HtmlToPdf();

​      Renderer.PrintOptions.EnableJavaScript = true;

​      Renderer.PrintOptions.RenderDelay = 500;

​      Renderer.PrintOptions.CssMediaType = PdfPrintOptions.PdfCssMediaType.Print;

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

 

​      var OutputPath = "HTMLD3Chart.pdf";

​      PDF.SaveAs(OutputPath);

 
​    }
​ Private Sub HTMLD3Chart()

​ var Renderer = New IronPdf.HtmlToPdf()

​ Renderer.PrintOptions.EnableJavaScript = True

​ Renderer.PrintOptions.RenderDelay = 500

​ Renderer.PrintOptions.CssMediaType = PdfPrintOptions.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:
'​ }
Jump to Article
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 >
'INSTANT VB TODO TASK: The following line could not be converted:
<!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)
If True Then

Dim fn = Me

Return [function]()
If True Then

Return fn.apply(thisp, arguments)

End If

End If

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 >
Jump to Article
Try IronPDF free for development


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:

Renderer.PrintOptions.EnableJavaScript = true;

Renderer.PrintOptions.RenderDelay = 500; //milliseconds
Renderer.PrintOptions.EnableJavaScript = True

Renderer.PrintOptions.RenderDelay = 500 'milliseconds
VB   C#


3. JavaScript Frameworks

Some very complex JavaScript frameworks might not always work 100% with Iron PDF 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:

​    private void HTMLD3Chart()

​    {

​      var Renderer = new IronPdf.HtmlToPdf();

​      Renderer.PrintOptions.EnableJavaScript = true;

​      Renderer.PrintOptions.RenderDelay = 500;

​      Renderer.PrintOptions.CssMediaType = PdfPrintOptions.PdfCssMediaType.Print;

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

​      var OutputPath = "HTMLD3Chart.pdf";

​      PDF.SaveAs(OutputPath);

​    }
​ Private Sub HTMLD3Chart()

​ var Renderer = New IronPdf.HtmlToPdf()

​ Renderer.PrintOptions.EnableJavaScript = True

​ Renderer.PrintOptions.RenderDelay = 500

​ Renderer.PrintOptions.CssMediaType = PdfPrintOptions.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.


<!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 >
'INSTANT VB TODO TASK: The following line could not be converted:
<!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)
If True Then

Dim fn = Me

Return [function]()
If True Then

Return fn.apply(thisp, arguments)

End If

End If

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#