Execute Custom JavaScript

Screen: Indicates that CSS rules are intended for on-screen viewing. Styles are optimized for digital screens, which typically include considerations like colors and layouts that look good on computer monitors.
Print: Instructs the browser to apply styles tailored for printed documents. This means the CSS rules are optimized for printing, ensuring readability and proper formatting when the HTML content is printed on physical media, like paper.

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    // Define the JavaScript code to change text color to red
    const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

    // Create rendering options object
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

    // HTML content to be rendered
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

    // Save the PDF with the executed JavaScript
    await pdf.saveAs("executed_js.pdf");
})();

Execute Custom JavaScript

Effortlessly modify HTML content appearance with JavaScript code.

To achieve this, start by defining the JavaScript code. In our example, we'll change the text color of all H1 tags to red.

Next, create a rendering options object and set the enableJavaScript property to true. Assign the previously defined JavaScript code to the javascript property within this object.

Utilize the PdfDocument.fromHtml method to render the HTML content into a PDF document. Pass the renderOptions object as the second parameter.

Finally, save the resulting PDF, which incorporates the effects of the executed JavaScript code (changing text color to red), as 'executed_js.pdf'.