Paramètres de rendu HTML

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");
})();

Paramètres de rendu HTML

De nombreuses options de rendu peuvent être configurées lors du rendu à partir de chaînes HTML, de fichiers ou d'URL Web. Les paramètres indiqués ci-dessus incluent la taille de papier personnalisée avec des unités de mesure configurables, l'activation de l'arrière-plan HTML, l'orientation de la page, le titre du document, le délai du processus de rendu, la spécification du type de média CSS, la sélection du mode papier, la création de champs de formulaire éditables, la personnalisation des marges et l'ajout de numéros de page.

Les types de médias CSS "screen" et "print" sont des directives utilisées pour spécifier comment les styles doivent être appliqués aux documents HTML en fonction du support d'affichage ou de sortie. Lorsque "screen" est choisi comme type de média, cela indique que les règles CSS sont destinées à l'affichage à l'écran, optimisant des facteurs tels que les couleurs et les mises en page pour les écrans numériques. À l'inverse, lorsque "print" est sélectionné, cela instruire le navigateur d'appliquer des styles adaptés aux documents imprimés, assurant la lisibilité et une mise en forme correcte lorsque le contenu HTML est imprimé sur un support physique. Parfois, il est nécessaire de définir le type de média CSS sur "screen" pour afficher certaines images d'arrière-plan.

Le retard dans le processus de rendu offre principalement suffisamment de temps pour charger JavaScript ou les polices.

Explication :

Structure HTML : Le code est structuré dans un format HTML5 standard avec une section <head> et <body>.
Métadonnées : Les balises méta définissent le jeu de caractères et la fenêtre d'affichage pour un design réactif.
Feuille de style :
- Style par défaut du corps : Définit la famille de polices et la marge applicables à tous les médias.
- Requête de média écran : Applique un fond gris clair et un texte plus foncé pour les écrans numériques.
- Requête de média impression : Applique un fond blanc et un texte noir, typique pour l'impression.
Exemple d'utilisation : La structure HTML et CSS donnée aide à démontrer comment différents styles peuvent être appliqués selon que le contenu est visualisé sur un écran ou imprimé.