Responsives HTML zu 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

Responsives HTML zu PDF

Bei den Viewport-Einstellungen gibt es CSS Media und den Papiermodus.

Mit der CSS-Medienoption in IronPDF können Sie festlegen, wie Stile auf HTML-Inhalte angewendet werden sollen, wenn diese in ein PDF-Dokument gerendert werden. Die beiden Werte für diese Option sind die CSS-Medien "screen" und "print":

Screen : Gibt an, dass die CSS-Regeln für die Bildschirmanzeige bestimmt sind. Die Designs sind für digitale Bildschirme optimiert, wobei typischerweise Aspekte wie Farben und Layouts berücksichtigt werden, die auf Computermonitoren gut aussehen.
Drucken : Weist den Browser an, für gedruckte Dokumente angepasste Stile anzuwenden. Das bedeutet, dass die CSS-Regeln für den Druck optimiert sind, um Lesbarkeit und korrekte Formatierung beim Drucken des HTML-Inhalts auf physischen Medien wie Papier zu gewährleisten.

Die Option "Papiermodus" in den Papierformatierungsoptionen von IronPDF legt fest, wie der gerenderte Inhalt auf die PDF-Seiten passen soll. Für diese Option gibt es mehrere Werte:

ContinuousFeed: Dieser Modus eignet sich für Durchlaufdrucker, bei denen der Inhalt auf eine Papierrolle gedruckt wird. Es wird typischerweise für Spezialdruckverfahren eingesetzt, beispielsweise in industriellen Umgebungen.
FitToHeight: In diesem Modus wird der Inhalt so skaliert, dass er innerhalb der angegebenen Höhe des Papiers passt, wobei das Seitenverhältnis beibehalten wird. Dadurch wird sichergestellt, dass der gesamte Inhalt ohne Überlauf sichtbar ist.
FitToWidth: In diesem Modus wird der Inhalt so skaliert, dass er innerhalb der angegebenen Breite des Papiers passt, wobei das Seitenverhältnis beibehalten wird. Dies ist nützlich, wenn Sie sicherstellen möchten, dass der Inhalt innerhalb einer bestimmten Breitenbeschränkung liegt.
FitToPage: In diesem Modus wird der Inhalt so skaliert, dass er auf die gesamte Seite passt, sowohl in Bezug auf Höhe als auch Breite, wobei das Seitenverhältnis beibehalten wird. Es stellt sicher, dass der gesamte Inhalt auf eine einzige Seite passt.

Explore Viewport Beispiel für Responsive PDF Rendering

Auf GitHub ansehen