HTML Rendering Settings

import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";

(async () => {
    // Many rendering options to use to customize!
    const options = {
        paperSize: {
            unit: PaperSizeUnit.Inch,
            width: 12.5,
            height: 20,
        },
        printHtmlBackgrounds: true,
        paperOrientation: PdfPaperOrientation.Landscape,
        title: "My PDF Document Name",
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 50, // in milliseconds
        },
        cssMediaType: CssMediaType.Screen,
        fitToPaperMode: FitToPaperModes.FitToPage,
        createPdfFormsFromHtml: true,

        // Supports margin customization
        margin: {
            top: 40, // millimeters
            left: 20, // millimeters
            right: 20, // millimeters
            bottom: 40, // millimeters
        },

        // Can set FirstPageNumber if you have a cover page
        firstPageNumber: 1, // use 2 if a cover page will be appended
    };

    // Render HTML page to PDF
    const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
    
    // Save the PDF
    await pdf.saveAs("my-content.pdf");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

HTML Rendering Settings

Many rendering options can be configured when rendering from HTML strings, files, or web URLs. The settings shown above include custom paper size with configurable measurement units, enabling HTML background, page orientation, document title, delaying the rendering process, specifying the CSS media type, selecting the paper mode, creating editable form fields, customizing margins, and adding page numbers.

The CSS media types "screen" and "print" are directives used to specify how styles should be applied to HTML documents based on the medium of display or output. When "screen" is chosen as the media type, it indicates that CSS rules are intended for on-screen viewing, optimizing factors like colors and layouts for digital screens. Conversely, when "print" is selected, it instructs the browser to apply styles tailored for printed documents, ensuring readability and proper formatting when the HTML content is printed on physical media. Sometimes, it is necessary to set the CSS media type to "screen" to display certain background images.

The delay in the rendering process primarily provides sufficient time for JavaScript or fonts to load.

Explanation:

HTML Structure: The code is structured in a standard HTML5 format with a <head> and <body> section.
Metadata: The <meta> tags define the character set and viewport for responsive design.

Stylesheet:

Default body style: Sets the font family and margin applicable across all media.
Screen Media Query: Applies a light gray background and darker text for digital screens.
Print Media Query: Applies a white background and black text, typical for printing.

Example Usage: The given HTML and CSS structure helps demonstrate how different styles can be applied depending on whether the content is viewed on a screen or printed.

Discover More PDF Generation Settings Examples on GitHub.

View on GitHub