1. IronPDF
  2. Comment faire
  3. URL de base et codage des actifs

Comment utiliser les URL de base et le codage des ressources

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 des projets .NET.

Une utilisation courante de cette bibliothèque est le rendu "HTML vers PDF" - où HTML est utilisé comme langage de conception pour le rendu d'un document PDF. Une question logique se pose : comment pouvons-nous utiliser des feuilles de style CSS et des fichiers d'images dans notre conversion HTML vers PDF ?

Comment utiliser HTML avec CSS et images

  1. Télécharger IronPDF pour la prise en charge de HTML à CSS à image
  2. Préciser BaseUrlOrPath paramètre permettant d'utiliser des images externes dans le code HTML
  3. Configurer la bonne src dans MVC pour l'afficher à la fois sur le web et dans le PDF de sortie
  4. Préciser BaseUrl propriété permettant de travailler avec un en-tête et un pied de page personnalisés
  5. Vérifier le PDF de sortie


Rendre un PDF à partir d'une chaîne HTML avec des images et des éléments 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 feuilles de style CSS, les fichiers JavaScript et les images. Le champ BaseUrlOrPath spécifie l'URL de base à partir de laquelle toutes les ressources seront chargées.

Il peut s'agir d'une URL commençant par "http" pour charger des ressources distantes ou d'un chemin d'accès à un fichier local pour accéder à des ressources sur votre disque. Le fait de définir correctement le BaseUrlOrPath permet de s'assurer que les ressources sont chargées correctement au cours du 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")
VB   C#

Application MVC

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

La hiérarchie des fichiers présentée ci-dessous est définie

  • baseUrlOrPath à @"wwwroot/image"
  • l'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")
VB   C#
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

[{w :(

Formats de chemin d'accès aux fichiers 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 toujours 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 lorsqu'il s'agit du chemin d'accès au fichier, ces formats ne fonctionnent pas bien dans 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 ajoutons des en-têtes et des pieds de page HTML à un PDF nouveau ou existant, ils sont traités comme des documents HTML autonomes et n'héritent pas de la BaseURL du PDF lui-même.

Nous devons définir une BaseURL à partir de laquelle les actifs peuvent être chargés :

: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
}
VB   C#

Fichier HTML vers PDF avec CSS, JS et images

Lors de la conversion d'un fichier HTML en PDF, toutes les ressources sont considérées comme 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")
VB   C#

Dans l'exemple ci-dessus, tous les fichiers JS, CSS et images seront chargés à partir du dossier C:\Assets sur le disque - le même répertoire que celui où se trouve le fichier HTML.

Pour plus de commodité, vous pouvez utiliserCustomCssUrl 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 .NET si vous le souhaitez. Par exemple, il est possible de spécifier une feuille de style supplémentaire qui ne sera utilisée que pour le rendu PDF .NET :

: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")
VB   C#

A noter
La propriété ChromePdfRenderOptions.CustomCssUrl n'est actuellement fonctionnelle que lors du rendu d'une chaîne HTML vers un document PDF en utilisant la méthode RenderHtmlAsPdf.

Encodage des images

Les images peuvent être encodées directement dans le fichier HTML ou la chaîne de caractères, ce qui permet d'éviter certains problèmes frustrants d'images introuvables. Pour ce faire, nous pouvons utiliser base64 :

  1. Il faut d'abord obtenir les données binaires de l'image, soit en lisant le fichier image, soit en le recevant par l'intermédiaire d'une requête réseau.

  2. Utilisez la méthode Convert.ToBase64String dans Microsoft .NET pour convertir les données binaires en base64.

  3. Construire la balise image en HTML en utilisant "data:image/svg+xml;base64," avant les données base64. Vous avez peut-être remarqué que le type d'image est spécifié avant les données base64. Visitez le siteDocs Web MDN sur les types et formats d'images pour plus d'informations sur les types de formats d'image.
: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")
VB   C#