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.
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 IronPdfHow 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 'milliseconds3. 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:
' }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>
