Comment utiliser CSS avec HTML
Le type de média CSS "screen" est principalement destiné à être affiché sur des écrans d'ordinateur et des dispositifs similaires. Lorsque des styles sont définis pour le type de média "écran", ils affectent la manière dont le contenu web est présenté sur les écrans, en mettant l'accent sur la conception visuelle et l'interactivité.
En revanche, le type de média CSS "print" est conçu pour l'impression. Il détermine la manière dont la page web apparaîtra à l'impression, en mettant l'accent sur l'optimisation du contenu pour la page imprimée. Cette optimisation peut inclure l'ajustement de la taille des polices, des marges et la suppression ou le masquage des éléments qui ne sont pas pertinents ou nécessaires lors de l'impression.
Comment utiliser Responsive CSS avec HTML
- Télécharger la bibliothèque IronPDF C# pour l'intégration CSS et HTML
- Préparer le fichier HTML pour la conversion en PDF
- Spécifier le type de média CSS pour une mise en forme PDF optimale
- Définir le type de média CSS 'Impression' pour les en-têtes de table répétés dans les PDF
- Configurer les dimensions de la fenêtre d'affichage pour un design réactif
Commencez avec IronPDF
Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit.
Types de CSS pour l'écran et l'impression (CSS3)
IronPDF génère des PDF à partir de HTML en C# et peut, par défaut, rendre sans effort une feuille de style d'écran en PDF. C'est pratique car les feuilles de style pour l'impression sont souvent moins bien documentées, utilisées ou développées que leurs équivalents pour l'écran.
CSS3 permet à certains styles CSS d'être rendus exclusivement dans les documents imprimés, tandis que d'autres sont destinés aux navigateurs web. IronPDF peut être programmé pour fonctionner avec l'un ou l'autre.
Créez et appliquez une feuille de style pour l'impression à votre HTML : Découvrez comment créer et appliquer une feuille de style d'impression parfaite..
Il est très difficile de dire quel type de média CSS est le meilleur, car chaque type vise des cas d'utilisation différents. Il vaut la peine d'essayer chacun d'entre eux par tâtonnement pour déterminer celui qui répond à vos besoins.
Répéter les en-têtes de tableau
Lorsque vous traitez des tables HTML qui s'étendent sur plusieurs pages, définissez la propriété CssMediaType sur PdfCssMediaType.Print. Cela permet de s'assurer que l'en-tête du tableau est répété en haut de chaque page étendue. En revanche, PdfCssMediaType.Screen indique à Chrome d'imprimer les en-têtes une seule fois.
Pour s'assurer que Chrome détecte l'en-tête de table, il doit être inclus dans une balise thead. Rendons le fichier HTML 'exemple de tableHeader.html de répétition des en-têtes de table' en PDF pour voir l'effet.
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.csusing IronPdf;
using IronPdf.Rendering;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);
// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");
pdf.SaveAs("tableHeader.pdf");Imports IronPdf
Imports IronPdf.Rendering
Private renderer As New ChromePdfRenderer()
' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)
' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")
pdf.SaveAs("tableHeader.pdf")
