1. IronPDF
  2. Anleitungen
  3. Basis-URLs & Asset-Kodierung

Verwendung von Basis-URLs und Asset-Kodierung

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF ist ein nützliches Tool zur Erzeugung von PDF-Dokumenten in .NET-Projekten.

Eine häufige Anwendung dieser Bibliothek ist das "HTML to PDF"-Rendering, bei dem HTML als Designsprache für das Rendering eines PDF-Dokuments verwendet wird. Eine logische Frage ist: wie können wir CSS-Stylesheets und Bilddateien in unserer HTML-zu-PDF-Konvertierung verwenden?

Wie man HTML mit CSS und Bildern verwendet

  1. IronPDF für die Unterstützung von HTML, CSS und Bildern herunterladen
  2. Geben Sie an BaseUrlOrPath parameter zur Verwendung externer Bilder in HTML
  3. Konfigurieren Sie die richtige src in MVC, um sowohl im Web als auch in der PDF-Ausgabe anzuzeigen
  4. Geben Sie an BaseUrl eigenschaft zur Arbeit mit benutzerdefinierten Kopf- und Fußzeilen
  5. Prüfen Sie die PDF-Ausgabe


Rendering einer PDF-Datei aus einem HTML-String mit Bild- und CSS-Assets

Bei der Konvertierung von HTML-Strings in PDF ist es wichtig, einen Parameter BaseUrlOrPath für Elemente wie CSS, JavaScript-Dateien und Bilder festzulegen. Die BaseUrlOrPath gibt die Basis-URL an, von der alle Assets relativ zu ihr geladen werden.

Dies kann eine Web-URL sein, die mit "http" beginnt, um entfernte Assets zu laden, oder ein lokaler Dateipfad, um auf Assets auf Ihrer Festplatte zuzugreifen. Die korrekte Einstellung von BaseUrlOrPath stellt sicher, dass die Assets während des Konvertierungsprozesses korrekt geladen werden.

: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#

MVC-Anwendung

In einer MVC-Anwendung kann die Angabe des Dateipfads eines Bildes eine Herausforderung darstellen. Damit das Bild von IronPDF gefunden und auf der Website korrekt angezeigt werden kann, müssen die baseUrl von IronPDF und das src=""-Attribut im HTML-String korrekt konfiguriert werden.

Mit der unten gezeigten Dateihierarchie

  • baseUrlOrPath zu @"wwwroot/image"
  • src-Attribut zu "../Bild/Muster.jpg"
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

Beispiel:

: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

Bevor Sie fortfahren

Dateipfadformate, die nicht funktionieren

Die folgenden Formate funktionieren gut, wenn sie im Chrome-Browser angezeigt werden, verweisen aber auf das falsche Ordnerverzeichnis, wenn sie in einer MVC-Anwendung verwendet werden. Diese Formate funktionieren auch mit IronPDF, wenn baseUrlOrPath in der Methode RenderHtmlAsPdf angegeben wird:

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

Andererseits funktionieren diese Formate gut mit MVC-Anwendungen, aber wenn es um den Dateipfad geht, funktionieren diese Formate nicht gut in IronPDF:

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

HTML-Kopf- und Fußzeilen mit Bildern und Assets

Wenn wir HTML-Kopf- und -Fußzeilen in eine neue oder bestehende PDF-Datei rendern, werden sie als eigenständige HTML-Dokumente behandelt und erben nicht die BaseURL der PDF-Datei selbst.

Wir sollten eine BaseURL festlegen, von der Assets geladen werden können:

: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#

HTML-Datei in PDF mit CSS, JS und Bildinhalten

Bei der Umwandlung einer HTML-Datei in eine PDF-Datei wird davon ausgegangen, dass alle Elemente in dieser Datei lokal sind.

: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#

Im obigen Beispiel werden alle JS-, CSS- und Bilddateien aus dem Ordner C:\Assets auf der Festplatte geladen - demselben Verzeichnis, in dem sich auch die HTML-Datei befindet.

Der Einfachheit halber können Sie Folgendes verwendenCustomCssUrl in ChromePdfRenderOptions für zusätzliche Stylesheets ein zusätzliches Stylesheet angeben, das nur für das .NET-PDF-Rendering verwendet wird, wenn Sie dies wünschen. Zum Beispiel:

: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#

Bitte beachten Sie
Die Eigenschaft ChromePdfRenderOptions.CustomCssUrl funktioniert derzeit nur beim Rendern von einem HTML-String in ein PDF-Dokument mit der Methode RenderHtmlAsPdf.

Bild-Asset-Codierung

Bildinhalte können direkt in die HTML-Datei oder -Zeichenkette kodiert werden, was dazu beitragen kann, einige der frustrierenden Probleme mit nicht gefundenen Bildern zu vermeiden. Dazu können wir die Verwendung von base64 nutzen:

  1. Erhalten Sie zunächst die Binärdaten des Bildes, indem Sie entweder die Bilddatei lesen oder sie durch eine Netzwerkanfrage erhalten.

  2. Verwenden Sie die Methode Convert.ToBase64String in Microsoft .NET, um die Binärdaten in Base64 zu konvertieren.

  3. Konstruieren Sie das Bild-Tag in HTML mit "data:image/svg+xml;base64" vor den base64-Daten. Sie haben vielleicht bemerkt, dass der Bildtyp vor den base64-Daten angegeben wird. Besuchen Sie dieMDN Web Docs über Bildtypen und -formate für weitere Informationen über Bildformattypen.
: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#