1. IronPDF
  2. Guides pratiques
  3. CSS (Écran & Impression)
Comment convertir HTML en PDF avec CSS réactif en utilisant C#

How to use CSS with HTML

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Le type de média CSS 'screen' est principalement destiné à l'affichage sur des écrans d'ordinateur et des dispositifs similaires. Lorsque des styles sont définis pour le type de média 'screen', ils affectent la présentation du contenu web sur les écrans, en mettant l'accent sur le design visuel et l'interactivité.

En revanche, le type de média CSS 'print' est conçu pour l'impression. Il détermine comment la page web apparaîtra lorsqu'elle sera imprimée, avec un accent sur l'optimisation du contenu pour la page imprimée. Cette optimisation peut inclure l'ajustement des tailles de police, des marges et la suppression ou le masquage d'éléments qui ne sont pas pertinents ou nécessaires à l'impression.

en-tête:2(Démarrage rapide : Générer des PDF avec HTML et CSS réactifs)

Convertissez votre HTML avec CSS réactif en un PDF soigné à l'aide d'IronPDF sans effort. Avec seulement quelques lignes de code, les développeurs peuvent s'assurer que leurs PDFs se rendent parfaitement sur tous les appareils, en maintenant l'intégrité des styles écran et imprimé. Ce guide rapide démontre comment utiliser IronPDF pour obtenir un rendu PDF professionnel à partir de votre contenu HTML existant, simplifiant le processus pour des résultats rapides et précis.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("responsive.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

Flux de travail minimal (5 étapes)

  1. Téléchargez la bibliothèque IronPDF C# pour l'intégration CSS et HTML
  2. Préparez le fichier HTML pour la conversion en PDF
  3. Spécifiez le type de média CSS pour un formatage optimal du PDF
  4. Définissez le type de média CSS 'Print' pour les en-têtes de table répétés dans les PDFs
  5. Configurez les dimensions du viewport pour un design réactif


Types CSS Écran & Imprimé (CSS3)

IronPDF génère des PDFs à partir de HTML en C# et peut rendre sans effort une feuille de style écran en PDF par défaut. Ceci est pratique parce que les feuilles de style d'impression sont souvent moins bien documentées, utilisées ou développées par rapport à leurs homologues écran.

CSS3 permet que certains styles CSS soient rendus exclusivement dans les documents imprimés, tandis que d'autres sont destinés aux navigateurs web. IronPDF peut être programmé pour travailler avec l'un ou l'autre.

Créez et appliquez une feuille de style imprimée à votre HTML : Apprenez à 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 meilleur car chaque type cible des cas d'utilisation différents. Il vaut la peine d'essayer chacun par essais et erreurs pour voir lequel convient à votre besoin.

Exemple d'Imprimé 1 Exemple d'Écran 1

Répéter les En-têtes de Table

Lorsqu'on traite des tables HTML qui s'étendent sur plusieurs pages, réglez la propriété CssMediaType à PdfCssMediaType.Print. Cela garantit que l'en-tête de la table est répété en haut de chaque page étendue. En revanche, PdfCssMediaType.Screen ordonne à Chrome d'imprimer les en-têtes une seule fois.

Pour s'assurer que Chrome détecte l'en-tête de la table, il doit être inclus dans une balise <thead>. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs
using 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")
$vbLabelText   $csharpLabel

Questions Fréquemment Posées

Comment puis-je convertir HTML en PDF avec un design réactif ?

Vous pouvez convertir HTML en PDF avec un design réactif en utilisant IronPDF en téléchargeant d'abord la bibliothèque IronPDF C#. Ensuite, préparez votre fichier HTML, spécifiez le type de média CSS approprié, et configurez les dimensions du viewport pour vous assurer que le PDF est réactif sur différents appareils.

Quelle est la différence entre les types de média CSS 'écran' et 'impression' ?

Le type de média CSS 'écran' est utilisé pour afficher le contenu sur les écrans numériques, en se concentrant sur le design visuel et l'interactivité. En revanche, le type de média 'impression' optimise le contenu pour les matériaux imprimés en ajustant des éléments tels que les tailles de police et les marges, le rendant adapté aux impressions physiques.

Comment assurer la répétition des en-têtes de tableau à chaque page dans un PDF ?

Pour assurer que les en-têtes de tableau se répètent à chaque page dans un PDF, définissez la propriété CssMediaType sur PdfCssMediaType.Print et enclamez l'en-tête du tableau dans une balise <thead>. Cela garantit une représentation cohérente de l'en-tête sur plusieurs pages.

IronPDF peut-il gérer les feuilles de style pour écran et impression ?

Oui, IronPDF peut gérer les feuilles de style pour écran et impression. Il permet de générer des PDFs à partir de HTML avec l'un ou l'autre type de média, assurant flexibilité selon que la sortie soit destinée aux écrans numériques ou à l'impression.

Quels sont les avantages d'utiliser une feuille de style d'impression lors de la conversion de HTML en PDF ?

Une feuille de style d'impression est bénéfique lors de la conversion de HTML en PDF car elle garantit que le contenu est optimisé pour l'impression. Cela inclut des ajustements aux tailles de police et aux marges, en s'assurant que le PDF est correctement formaté pour les impressions physiques.

Comment implémentez-vous le CSS réactif dans un PDF en utilisant une bibliothèque C# ?

Pour implémenter le CSS réactif dans un PDF en utilisant IronPDF, téléchargez la bibliothèque IronPDF C#, préparez votre contenu HTML, spécifiez le type de média CSS souhaité, et ajustez les dimensions du viewport pour que le PDF s'adapte à divers appareils.

Pourquoi est-il important d'utiliser le bon type de média CSS pour les PDFs ?

Utiliser le bon type de média CSS est important pour les PDFs car cela détermine comment le contenu est rendu. Le type de média 'écran' convient aux affichages numériques, tandis que le type de média 'impression' garantit que le contenu est optimisé pour le papier, affectant des éléments tels que la mise en page et la lisibilité.

IronPDF prend-il en charge .NET 10 et y a-t-il des avantages à utiliser la dernière version ?

Oui, IronPDF prend en charge .NET 10. .NET 10 étant une version à support à long terme (LTS) offrant des améliorations significatives en termes de performances, d'environnement d'exécution et de kit de développement logiciel (SDK) — notamment une meilleure intégration JIT, l'accélération matérielle et des API HTTP et de sérialisation améliorées —, son utilisation avec IronPDF permet une génération de PDF plus rapide et plus efficace, ainsi qu'une stabilité à long terme. ([devblogs.microsoft.com](https://devblogs.microsoft.com/dotnet/announcing-dotnet-10/?utm_source=openai))

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 16,154,058 | Version : 2025.11 vient de sortir