Responsive HTML to PDF

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

(async () => {
    const options = {
        // Choose Screen or Print CSS media
        cssMediaType: CssMediaType.Screen,
        
        // Set paper mode to automatic fit to physical paper
        fitToPaperMode: FitToPaperModes.FitToPage,
    };

    // Render an HTML file
const pdf = await PdfDocument.fromHtml("Responsive.html", {renderOptions: options});

await pdf.saveAs("pdf-from-html.pdf");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Responsive HTML to PDF

In terms of viewport settings, there are CSS media and paper mode.

The CSS media option in IronPDF allows you to specify how styles should be applied to HTML content when rendering it to a PDF document. The two values for this option are CSS media "screen" and "print":

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.

The paper mode option in IronPDF's Paper Sizing Options determines how the rendered content should fit on the PDF pages. There are several values for this option:

ContinuousFeed: This mode is suitable for continuous feed printers, where content is printed on a roll of paper. It's typically used for specialized printing, such as in industrial settings.
FitToHeight: In this mode, the content is scaled to fit within the specified height of the paper while maintaining the aspect ratio. This ensures that the entire content is visible without overflowing.
FitToWidth: In this mode, the content is scaled to fit within the specified width of the paper while maintaining the aspect ratio. This is useful when you want to ensure that the content fits within a specific width constraint.
FitToPage: In this mode, the content is scaled to fit within the entire page, both in terms of height and width, while maintaining the aspect ratio. It ensures that the entire content fits on a single page.

Explore Viewport Example for Responsive PDF Rendering

View on GitHub