Render Javascript in .NET for HTML to PDF Generation
Published: 2022-01-25 06:08:11

---
canonical_url: https://ironpdf.com/docs/questions/javascript-to-pdf/
---

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.

**Allow JavaScript Execution Time**
**C#:**
```
Renderer.RenderingOptions.EnableJavaScript = true;
Renderer.RenderingOptions.RenderDelay = 500; //milliseconds
```

**VB:**
```
Renderer.RenderingOptions.EnableJavaScript = True
Renderer.RenderingOptions.RenderDelay = 500 'milliseconds
```

---

## 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](https://ironpdf.com/packages/IronPdf.Package.For.Javascript.PDF.HTML.zip) or you can use [NuGet Package Manager](https://www.nuget.org/packages/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:

**C#:**
```
Renderer.RenderingOptions.EnableJavaScript = true;
Renderer.RenderingOptions.RenderDelay = 500; //milliseconds
```

**VB:**
```
Renderer.RenderingOptions.EnableJavaScript = True
Renderer.RenderingOptions.RenderDelay = 500 'milliseconds
```

---

## 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](https://d3js.org/) is a perfect fit for IronPDF when wanting to do any charting or imaging.

D3.js or, simply D3, stands for [Data-Driven Documents](https://d3js.org/). It is a JavaScript library that helps in creating dynamic, interactive data visualizations in web browsers. D3 makes use of [Scalable Vector Graphics SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics#) in [HTML5](https://en.wikipedia.org/wiki/HTML5) and Cascading Style Sheets [CSS3](https://en.wikipedia.org/wiki/Cascading_Style_Sheets).

To create a chart using D3.js and then convert it into a PDF document, use code similar to the following:

**C#:**
```
​    private void 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);
​    }
```

**VB:**
```
​ 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:
'​ }
```

---

## 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](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html) 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.

**C#:**
```
<!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>
```

**VB:**
```
'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>
```