How to use JavaScript with HTML to PDF

using IronPdf;

// This code demonstrates how to render HTML content with JavaScript into a PDF using IronPdf

// HTML content that includes JavaScript
string htmlWithJavaScript = @"<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>";

// Instantiate a ChromePdfRenderer to handle the rendering of the PDF
var renderer = new ChromePdfRenderer();

// Enable the execution of JavaScript within the HTML content
renderer.RenderingOptions.EnableJavaScript = true;

// Set the JavaScript timeout to wait for JS execution before rendering the PDF
// This is set in milliseconds (500 ms in this case)
renderer.RenderingOptions.JavaScriptTimeout = 500;

// Render the HTML (including JavaScript) to a PDF document
var pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript);

// Save the rendered PDF document to a file named "javascriptHtml.pdf"
pdfJavaScript.SaveAs("javascriptHtml.pdf");

Imports IronPdf



' This code demonstrates how to render HTML content with JavaScript into a PDF using IronPdf



' HTML content that includes JavaScript

Private htmlWithJavaScript As String = "<h1>This is HTML</h1>

<script>

    document.write('<h1>This is JavaScript</h1>');

    window.ironpdf.notifyRender();

</script>"



' Instantiate a ChromePdfRenderer to handle the rendering of the PDF

Private renderer = New ChromePdfRenderer()



' Enable the execution of JavaScript within the HTML content

renderer.RenderingOptions.EnableJavaScript = True



' Set the JavaScript timeout to wait for JS execution before rendering the PDF

' This is set in milliseconds (500 ms in this case)

renderer.RenderingOptions.JavaScriptTimeout = 500



' Render the HTML (including JavaScript) to a PDF document

Dim pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript)



' Save the rendered PDF document to a file named "javascriptHtml.pdf"

pdfJavaScript.SaveAs("javascriptHtml.pdf")

using IronPdf;

// Creates a new instance of the ChromePdfRenderer,
// which allows for rendering HTML to PDF using Google Chrome's rendering engine.
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enables JavaScript execution within the PDF rendering process.
// This JavaScript code will locate all <h1> elements in the HTML and change
// their text color to red.
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
});";

// Renders the specified HTML content as a PDF.
// The HTML contains an <h1> element with the text "Happy New Year!" which will have its color
// changed to red by the JavaScript code.
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

// Saves the generated PDF document to a file named "executed_js.pdf".
// This file will be created in the same directory where the application is running, 
// unless otherwise specified by a different path.
pdf.SaveAs("executed_js.pdf");

Imports IronPdf



' Creates a new instance of the ChromePdfRenderer,

' which allows for rendering HTML to PDF using Google Chrome's rendering engine.

Private renderer As New ChromePdfRenderer()



' Enables JavaScript execution within the PDF rendering process.

' This JavaScript code will locate all <h1> elements in the HTML and change

' their text color to red.

renderer.RenderingOptions.Javascript = "

document.querySelectorAll('h1').forEach(function(el){

    el.style.color='red';

});"



' Renders the specified HTML content as a PDF.

' The HTML contains an <h1> element with the text "Happy New Year!" which will have its color

' changed to red by the JavaScript code.

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")



' Saves the generated PDF document to a file named "executed_js.pdf".

' This file will be created in the same directory where the application is running, 

' unless otherwise specified by a different path.

pdf.SaveAs("executed_js.pdf")

using IronPdf;
using System;

// Create a new instance of ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set up a listener for JavaScript console messages to help with debugging.
// This logs messages from the PDF rendering process to the console.
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");

// Log a message to the console from the JavaScript within the PDF rendering process.
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF and save the document within the PdfDocument object.
// The HTML '<h1> Hello World </h1>' is converted to a PDF format.
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// This block demonstrates handling an error scenario in JavaScript during the rendering process.
// The attempt to style a non-existing element will yield a JavaScript error.
// The error is logged thanks to the JavascriptMessageListener set previously.
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render the same HTML to PDF to illustrate error logging.
// Although the JavaScript will throw an error, the PDF rendering will still proceed.
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

Imports IronPdf

Imports System



' Create a new instance of ChromePdfRenderer

Private renderer As New ChromePdfRenderer()



' Set up a listener for JavaScript console messages to help with debugging.

' This logs messages from the PDF rendering process to the console.

renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")



' Log a message to the console from the JavaScript within the PDF rendering process.

renderer.RenderingOptions.Javascript = "console.log('foo');"



' Render HTML to PDF and save the document within the PdfDocument object.

' The HTML '<h1> Hello World </h1>' is converted to a PDF format.

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")



'--------------------------------------------------//

' This block demonstrates handling an error scenario in JavaScript during the rendering process.

' The attempt to style a non-existing element will yield a JavaScript error.

' The error is logged thanks to the JavascriptMessageListener set previously.

renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"



' Render the same HTML to PDF to illustrate error logging.

' Although the JavaScript will throw an error, the PDF rendering will still proceed.

Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

// Import the IronPdf namespace to use the PDF generation functionality.
using IronPdf;

// Define an HTML string to be converted into a PDF. This contains a simple C3.js bar chart.
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>
        // Ensure backward compatibility for `bind` method in older browsers
        Function.prototype.bind = Function.prototype.bind 

 function (thisp) {
            var fn = this;
            // Return a function that applies the original function (`fn`) using the provided context (`thisp`)
            return function () {
                return fn.apply(thisp, arguments);
            };
        };

        // Generate a simple chart using C3.js
        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 the ChromePdfRenderer which uses headless Chrome to render PDFs.
var renderer = new ChromePdfRenderer();

// Enable JavaScript in the rendering process, important for rendering dynamic content.
renderer.RenderingOptions.EnableJavaScript = true;

// If the IronPdf library version requires it, set the JavaScript rendering option.
renderer.RenderingOptions.JavaScript = IronPdf.RenderingOptionEnums.PdfRenderingOptionsJavascript.ManualRenderDelay;

// Set the delay to 500 milliseconds, ensuring the chart is fully rendered before the PDF is generated.
renderer.RenderingOptions.ManualJavaScriptDelay = 500;

// Set the width of the output PDF to contain the full chart width.
renderer.RenderingOptions.Width = 1000;

// Render the HTML string (with embedded JavaScript) as a PDF document. 
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Save the rendered PDF file to the specified path.
pdfJavaScript.SaveAs("renderChart.pdf");

' Import the IronPdf namespace to use the PDF generation functionality.

Imports IronPdf



' Define an HTML string to be converted into a PDF. This contains a simple C3.js bar chart.

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>

        // Ensure backward compatibility for `bind` method in older browsers

        Function.prototype.bind = Function.prototype.bind 

 function (thisp) {

            var fn = this;

            // Return a function that applies the original function (`fn`) using the provided context (`thisp`)

            return function () {

                return fn.apply(thisp, arguments);

            };

        };



        // Generate a simple chart using C3.js

        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 the ChromePdfRenderer which uses headless Chrome to render PDFs.

Private renderer = New ChromePdfRenderer()



' Enable JavaScript in the rendering process, important for rendering dynamic content.

renderer.RenderingOptions.EnableJavaScript = True



' If the IronPdf library version requires it, set the JavaScript rendering option.

renderer.RenderingOptions.JavaScript = IronPdf.RenderingOptionEnums.PdfRenderingOptionsJavascript.ManualRenderDelay



' Set the delay to 500 milliseconds, ensuring the chart is fully rendered before the PDF is generated.

renderer.RenderingOptions.ManualJavaScriptDelay = 500



' Set the width of the output PDF to contain the full chart width.

renderer.RenderingOptions.Width = 1000



' Render the HTML string (with embedded JavaScript) as a PDF document. 

Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)



' Save the rendered PDF file to the specified path.

pdfJavaScript.SaveAs("renderChart.pdf")