1. IronPDF
  2. Guides pratiques
  3. URL de base et encodage des ressources
Comment utiliser les URLs de base dans la génération de PDFs avec C#

How to Use Base URLs & Asset Encoding

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

IronPDF est un outil utile pour générer des documents PDF dans les projets .NET.

Une utilisation courante de cette bibliothèque est le rendu HTML en PDF - où le HTML est utilisé comme langage de design pour rendre un document PDF. Une question logique est : comment pouvons-nous utiliser des feuilles de style CSS et des fichiers image dans notre conversion HTML en PDF ?

introduction:2(Démarrage rapide : Mettre en œuvre les URLs de base dans IronPDF)

Commencez avec IronPDF en implémentant facilement des URL de base pour un chargement transparent des actifs lors de la conversion HTML en PDF en .NET C#. Cet exemple démontre comment définir BaseUrlOrPath pour s'assurer que tous les CSS, JavaScript, et images sont correctement référencés, simplifiant ainsi le processus de génération de documents PDF robustes. Parfait pour les développeurs désireux d'améliorer le rendu de leurs PDF avec une configuration minimale.

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().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with‑assets.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écharger IronPDF pour le support HTML en CSS en image
  2. Spécifier le paramètre BaseUrlOrPath pour utiliser des images externes en HTML
  3. Configurer le src correct dans MVC pour montrer à la fois sur le web et le PDF de sortie
  4. Spécifier la propriété BaseUrl pour travailler avec un en-tête et un pied de page personnalisés
  5. Vérifier le PDF de sortie


Rendu d'un PDF à partir d'une chaîne HTML avec des ressources d'images et CSS

Lors de la conversion d'une chaîne HTML en PDF, il est important de définir un paramètre BaseUrlOrPath pour les ressources telles que les fichiers CSS, JavaScript et les images. Le BaseUrlOrPath spécifie l'URL de base à partir de laquelle toutes les ressources seront chargées de manière relative.

Cela peut être une URL Web commençant par 'http' pour charger des ressources distantes ou un chemin de fichier local pour accéder aux ressources sur votre disque. Définir correctement le BaseUrlOrPath garantit que les ressources sont chargées correctement pendant le processus de conversion.

:path=/static-assets/pdf/content-code-examples/how-to/base-urls-baseurl.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

string baseUrl = @"C:\site\assets\";
string html = "<img src='icons/iron.png'>";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html, baseUrl);

// Export PDF
pdf.SaveAs("html-with-assets.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

Private baseUrl As String = "C:\site\assets\"
Private html As String = "<img src='icons/iron.png'>"

' Render HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

' Export PDF
pdf.SaveAs("html-with-assets.pdf")
$vbLabelText   $csharpLabel

Application MVC

Dans une application MVC, spécifier le chemin de fichier d'une image peut être difficile. Pour s'assurer que l'image peut être trouvée par IronPDF et affichée correctement sur le site web, le baseUrl d'IronPDF et l'attribut src="" sur la chaîne HTML doivent être configurés correctement.

Avec la hiérarchie de fichiers indiquée ci-dessous

  • baseUrlOrPath à "wwwroot/image"
  • attribut src à "../image/Sample.jpg"
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

Par exemple :

:path=/static-assets/pdf/content-code-examples/how-to/base-mvc.cs
// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");
' Instantiate ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")
$vbLabelText   $csharpLabel 
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

Avertissement

Formats de chemin de fichier qui ne fonctionnent pas

Les formats suivants fonctionnent bien lors de l'affichage sur le navigateur Chrome, mais pointent vers le mauvais répertoire de dossiers lorsqu'ils sont utilisés dans une application MVC. Ces formats fonctionnent encore avec IronPDF si baseUrlOrPath est fourni dans la méthode RenderHtmlAsPdf :

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>  
<img src="image/footer.png"/>  
<img src="./image/footer.png"/>
HTML

D'autre part, ces formats fonctionnent bien avec l'application MVC, mais quand il s'agit de chemin de fichier, ces formats ne fonctionnent pas bien avec IronPDF :

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>
<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>
HTML

En-têtes et pieds de page HTML avec images et ressources

Lorsque nous rendons les en-têtes et pieds de page HTML dans un PDF nouveau ou existant, ils sont traités comme des documents HTML autonomes et ne héritent pas de la BaseURL du PDF lui-même.

Nous devrions définir un BaseURL à partir duquel les ressources peuvent être chargées :

:path=/static-assets/pdf/content-code-examples/how-to/base-header-footer.cs
using IronPdf;
using System;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Add header
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    MaxHeight = 20,
    HtmlFragment = "<img src='logo.png'>",
    BaseUrl = new Uri(@"C:\assets\images\").AbsoluteUri
};
Imports IronPdf
Imports System

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Add header
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
	.MaxHeight = 20,
	.HtmlFragment = "<img src='logo.png'>",
	.BaseUrl = (New Uri("C:\assets\images\")).AbsoluteUri
}
$vbLabelText   $csharpLabel

Fichier HTML en PDF avec des ressources CSS, JS et image

Lors du rendu d'un fichier HTML en PDF, toutes les ressources seront supposées locales à ce fichier.

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("C:\\Assets\\TestInvoice1.html");

// Export PDF
pdf.SaveAs("Invoice.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Render HTML file to PDF
Private pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Assets\TestInvoice1.html")

' Export PDF
pdf.SaveAs("Invoice.pdf")
$vbLabelText   $csharpLabel

Dans l'exemple ci-dessus, tous les fichiers JS, CSS et images seront chargés depuis le dossier C:\Assets sur le disque - le même répertoire dans lequel le fichier HTML est situé.

Pour plus de commodité, vous pouvez utiliser CustomCssUrl dans ChromePdfRenderOptions pour des feuilles de style supplémentaires pour spécifier une feuille de style supplémentaire qui n'est utilisée que pour le rendu PDF en .NET si vous le souhaitez. Par exemple :

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css";

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export PDF
pdf.SaveAs("tryCss.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css"

' Render HTML file to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

' Export PDF
pdf.SaveAs("tryCss.pdf")
$vbLabelText   $csharpLabel

[{i:(La propriété ChromePdfRenderOptions.CustomCssUrl est actuellement fonctionnelle uniquement lors du rendu d'une chaîne HTML en un document PDF en utilisant la méthode RenderHtmlAsPdf)}}]

Encodage des ressources d'image

Les ressources d'image peuvent être encodées directement dans le fichier ou la chaîne HTML, ce qui peut aider à éviter certains des problèmes frustrants liés à l'absence de certaines images. Pour ce faire, nous pouvons utiliser l'encodage en base64 :

  1. Obtenez d'abord les données binaires de l'image en lisant le fichier de l'image ou en les recevant via une requête réseau.
  2. Utilisez la méthode Convert.ToBase64String dans Microsoft .NET pour convertir les données binaires en base64.
  3. Construisez la balise image en HTML en utilisant "data:image/svg+xml;base64," avant les données en base64. Vous avez peut-être remarqué que le type d'image est spécifié avant les données base64. Visitez la MDN Web Docs on Image Types and Formats pour plus d'informations sur les types et formats d'images.
:path=/static-assets/pdf/content-code-examples/how-to/add-images-to-pdfs-base64-image.cs
using IronPdf;
using System;
using System.IO;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Import image file binary data
byte[] binaryData = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg");

// Convert the binary data to base 64
string imgDataUri = Convert.ToBase64String(binaryData);

// Embed in HTML
string html = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>";

// Convert HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("embedImageBase64.pdf");
Imports IronPdf
Imports System
Imports System.IO

Private renderer As New ChromePdfRenderer()

' Import image file binary data
Private binaryData() As Byte = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg")

' Convert the binary data to base 64
Private imgDataUri As String = Convert.ToBase64String(binaryData)

' Embed in HTML
Private html As String = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>"

' Convert HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

' Export the PDF
pdf.SaveAs("embedImageBase64.pdf")
$vbLabelText   $csharpLabel

Questions Fréquemment Posées

Quelle est l'importance d'utiliser des URL de base dans la conversion de HTML en PDF ?

Les URL de base sont cruciales dans la conversion de HTML en PDF car elles assurent que tous les éléments associés comme les feuilles de style CSS, les fichiers JavaScript et les images sont correctement chargés. Dans IronPDF, le paramètre BaseUrlOrPath peut être défini sur une URL web ou un chemin de fichier local pour faciliter ce processus.

Comment gérez-vous le chargement des ressources dans une application MVC pour la génération de PDF ?

Dans une application MVC utilisant IronPDF, vous pouvez gérer le chargement des ressources en configurant le paramètre BaseUrlOrPath pour pointer vers le répertoire contenant vos ressources. De cette façon, votre HTML référencera correctement les chemins CSS et images par rapport à ce chemin de base.

Qu'est-ce que l'encodage des ressources et pourquoi est-il utilisé dans la génération de PDF ?

L'encodage des ressources implique la conversion des données d'image en une chaîne base64 et leur intégration dans le HTML. Cette technique, utilisée avec IronPDF, garantit que les images ne manquent pas lors du processus de rendu PDF, en particulier lorsque les ressources ne sont pas directement accessibles à partir d'une URL ou d'un chemin de fichier.

Comment pouvez-vous inclure des feuilles de style supplémentaires lors du rendu PDF dans .NET ?

Vous pouvez inclure des feuilles de style supplémentaires lors du rendu PDF dans .NET en utilisant les options ChromePdfRenderOptions d'IronPDF. En définissant la propriété CustomCssUrl, vous pouvez spécifier les feuilles de style externes à utiliser dans le processus de rendu.

Quelles sont quelques étapes de dépannage courantes pour les images manquantes dans les PDFs ?

Les étapes de dépannage courantes pour les images manquantes dans les PDFs incluent la vérification de la justesse des attributs BaseUrlOrPath et src dans votre HTML. S'assurer que ces chemins sont exacts lors de l'utilisation d'IronPDF résoudra la plupart des problèmes liés aux images manquantes.

Comment les en-têtes et pieds de page HTML peuvent-ils être rendus avec des images dans les PDF ?

Les en-têtes et pieds de page HTML peuvent être rendus avec des images dans les PDFs en définissant une URL de base séparée pour chacun. À l'aide d'IronPDF, les en-têtes et pieds de page sont traités comme des documents HTML autonomes, il est donc important de s'assurer que leurs chemins de base sont correctement configurés pour le chargement des ressources.

Pouvez-vous convertir des fichiers HTML locaux avec des ressources en PDF ?

Oui, vous pouvez convertir des fichiers HTML locaux avec des ressources en PDF en utilisant IronPDF. En vous assurant que le BaseUrlOrPath est défini sur le répertoire du fichier HTML, IronPDF chargera correctement toutes les ressources associées comme le CSS et les images.

IronPDF est-il entièrement compatible avec .NET 10 lors de l'utilisation d'URL de base pour le chargement des ressources ?

Oui. IronPDF est conçu pour être entièrement compatible avec .NET 10. Il prend en charge l'utilisation de BaseUrlOrPath (chemins de fichiers locaux ou URL web) pour le chargement des ressources lors de la conversion HTML vers PDF, sans nécessiter de solutions de contournement supplémentaires. Vous pouvez utiliser les URL de base dans vos projets .NET 10 avec IronPDF en toute confiance, comme dans les versions précédentes.

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