HTML réactif en 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

HTML réactif en PDF

En termes de paramètres d'affichage, il existe des modes média CSS et papier.

L'option média CSS dans IronPDF vous permet de spécifier comment les styles doivent être appliqués au contenu HTML lors de la conversion en document PDF. Les deux valeurs pour cette option sont " écran " et " imprimé " :

Écran : Indique que les règles CSS sont destinées à la visualisation sur écran. Les styles sont optimisés pour les écrans numériques, qui incluent généralement des considérations comme les couleurs et les mises en page qui rendent bien sur les moniteurs d'ordinateur.
Imprimé: Indique au navigateur d'appliquer des styles adaptés aux documents imprimés. Cela signifie que les règles CSS sont optimisées pour l'impression, garantissant la lisibilité et le formatage approprié lorsque le contenu HTML est imprimé sur du support physique, comme le papier.

L'option mode papier dans Options de taille de papier d'IronPDF détermine comment le contenu rendu doit s'adapter aux pages PDF. Il y a plusieurs valeurs pour cette option :

ContinuousFeed : Ce mode est adapté aux imprimantes à alimentation continue, où le contenu est imprimé sur un rouleau de papier. Il est généralement utilisé pour les impressions spécialisées, comme dans les environnements industriels.
FitToHeight : Dans ce mode, le contenu est mis à échelle pour s'adapter à la hauteur spécifiée du papier tout en maintenant le rapport d'aspect. Cela garantit que la totalité du contenu est visible sans débordement.
FitToWidth : Dans ce mode, le contenu est mis à échelle pour s'adapter à la largeur spécifiée du papier tout en maintenant le rapport d'aspect. Ceci est utile lorsque vous souhaitez vous assurer que le contenu s'adapte à une contrainte de largeur spécifique.
FitToPage : Dans ce mode, le contenu est mis à échelle pour s'adapter à l'ensemble de la page, que ce soit en termes de hauteur et de largeur, tout en maintenant le rapport d'aspect. Cela garantit que la totalité du contenu s'adapte sur une seule page.

Explorer l'exemple de fenêtre de visualisation pour un rendu PDF réactif

Voir sur GitHub