1. IronPDF
  2. Anleitungen
  3. Basis-URLs & Asset-Encoding
Wie man Basis-URLs in der PDF-Erstellung mit C# verwendet

How to Use Base URLs & Asset Encoding

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

IronPDF ist ein nützliches Werkzeug zur Erstellung von PDF-Dokumenten in .NET-Projekten.

Eine häufige Verwendung dieser Bibliothek ist das Rendern von „HTML zu PDF“ – wobei HTML als Designtsprache zum Rendern eines PDF-Dokuments verwendet wird. Eine logische Frage ist: wie können wir CSS-Stylesheets und Bilddateien in unserer HTML-zu-PDF-Konvertierung verwenden?

als-Überschrift:2(Kurzanleitung: Implementieren von Base-URLs in IronPDF)

Beginnen Sie mit IronPDF, indem Sie einfach Basis-URLs implementieren, um ein nahtloses Laden von Assets während der HTML-zu-PDF-Konvertierung in .NET C# zu ermöglichen. Dieses Beispiel zeigt, wie man BaseUrlOrPath einstellt, um sicherzustellen, dass alle CSS, JavaScript und Bilder korrekt referenziert werden, was den Prozess der Erstellung robuster PDF-Dokumente vereinfacht. Perfekt für Entwickler, die ihre PDF-Erstellung mit minimalem Aufwand verbessern möchten.

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">

Minimaler Workflow (5 Schritte)

  1. Laden Sie IronPDF zur Unterstützung von HTML zu CSS zu Bild herunter
  2. Geben Sie den BaseUrlOrPath-Parameter an, um externe Bilder in HTML zu verwenden
  3. Konfigurieren Sie die richtige src in MVC, um sowohl im Web als auch im Ausgabe-PDF gezeigt zu werden
  4. Geben Sie die BaseUrl-Eigenschaft an, um mit benutzerdefinierten Kopf- und Fußzeilen zu arbeiten
  5. Überprüfen Sie das Ausgabe-PDF


Rendern eines PDFs aus einem HTML-String mit Bild- und CSS-Assets

Bei der Arbeit mit HTML-String zu PDF-Konvertierung ist es wichtig, einen BaseUrlOrPath-Parameter für Assets wie CSS, JavaScript-Dateien und Bilder zu setzen. Der BaseUrlOrPath gibt die Basis-URL an, von der alle Assets relativ 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")
$vbLabelText   $csharpLabel

MVC-Anwendung

In einer MVC-Anwendung kann das Angeben des Dateipfads eines Bildes herausfordernd sein. Um sicherzustellen, dass das Bild von IronPDF gefunden und korrekt auf der Website angezeigt wird, müssen die baseUrl von IronPDF und das src=""-Attribut im HTML-String korrekt konfiguriert werden.

Mit der unten gezeigten Dateihierarchie

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

Zum 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")
$vbLabelText   $csharpLabel 
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

Warnung

Dateipfadformate, die nicht funktionieren

Die folgenden Formate funktionieren gut, wenn sie im Chrome-Browser angezeigt werden, verweisen jedoch auf das falsche Verzeichnis, wenn sie in einer MVC-Anwendung verwendet werden. Diese Formate funktionieren immer noch mit IronPDF, wenn baseUrlOrPath in der RenderHtmlAsPdf-Methode 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 der MVC-Anwendung, 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 ein neues oder bestehendes PDF rendern, werden sie als eigenständige HTML-Dokumente behandelt und übernehmen nicht die BaseURL aus dem PDF selbst.

Wir sollten eine BaseURL festlegen, von der aus 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
}
$vbLabelText   $csharpLabel

HTML-Datei zu PDF mit CSS-, JS- und Bild-Assets

Beim Rendern einer HTML-Datei in ein PDF werden alle Assets als lokal zu dieser Datei angenommen.

: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

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

Der Einfachheit halber können Sie CustomCssUrl in ChromePdfRenderOptions für zusätzliche Stylesheets verwenden, um ein zusätzliches Stylesheet anzugeben, das nur für die .NET-PDF-Erstellung verwendet wird, wenn Sie es 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")
$vbLabelText   $csharpLabel

Hinweis:Die ChromePdfRenderOptions.CustomCssUrl Eigenschaft ist derzeit nur funktional, wenn von einem HTML-String in ein PDF-Dokument gerendert wird, mithilfe der RenderHtmlAsPdf Methode.

Bild-Asset-Kodierung

Bild-Assets können direkt in die HTML-Datei oder den String kodiert werden, was helfen kann, einige der frustrierenden Probleme zu vermeiden, dass Bilder nicht gefunden werden. Dazu können wir die Verwendung von Base64 nutzen:

  1. Zuerst die Binärdaten des Bildes erhalten, entweder durch Lesen der Bilddatei oder durch Erhalt über eine Netzwerk-Anfrage.
  2. Verwenden Sie die Convert.ToBase64String-Methode in Microsoft .NET, um die Binärdaten in Base64 umzuwandeln.
  3. Erstellen Sie das Bild-Tag in HTML mit "data:image/svg+xml;base64," vor den base64-Daten. Vielleicht haben Sie bemerkt, dass der Bildtyp vor den Base64-Daten angegeben wird. Besuchen Sie die MDN Web Docs zu Bildtypen und -formaten für weitere Informationen zu Bildformat-Typen.
: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

Häufig gestellte Fragen

Was ist die Bedeutung der Verwendung von Base-URLs bei der HTML-zu-PDF-Konvertierung?

Base-URLs sind bei der HTML-zu-PDF-Konvertierung entscheidend, da sie sicherstellen, dass alle zugehörigen Assets wie CSS-Stile, JavaScript-Dateien und Bilder korrekt geladen werden. In IronPDF kann der BaseUrlOrPath-Parameter auf eine Web-URL oder einen lokalen Dateipfad gesetzt werden, um diesen Prozess zu erleichtern.

Wie können Sie das Laden von Assets in einer MVC-Anwendung für die PDF-Erstellung handhaben?

In einer MVC-Anwendung mit IronPDF können Sie das Laden von Assets handhaben, indem Sie den BaseUrlOrPath-Parameter so konfigurieren, dass er auf das Verzeichnis zeigt, das Ihre Assets enthält. Auf diese Weise wird Ihr HTML CSS- und Bildpfade korrekt relativ zu diesem Basispfad referenzieren.

Was ist Asset-Encoding und warum wird es bei der PDF-Erstellung verwendet?

Beim Asset-Encoding wird Bilddaten in einen Base64-String umgewandelt und in HTML eingebettet. Diese Technik, die mit IronPDF verwendet wird, stellt sicher, dass Bilder beim PDF-Rendering-Prozess nicht fehlen, insbesondere wenn Assets nicht direkt über eine URL oder einen Dateipfad zugänglich sind.

Wie können Sie zusätzliche Stylesheets während des PDF-Renderings in .NET einbinden?

Sie können zusätzliche Stylesheets während des PDF-Renderings in .NET mithilfe von IronPDFs ChromePdfRenderOptions einbinden. Durch das Setzen der CustomCssUrl-Eigenschaft können Sie externe Stylesheets angeben, die im Rendering-Prozess verwendet werden sollen.

Was sind einige häufige Schritte zur Fehlerbehebung bei fehlenden Bildern in PDFs?

Häufige Schritte zur Fehlerbehebung bei fehlenden Bildern in PDFs umfassen die Überprüfung der Korrektheit des BaseUrlOrPath und der src-Attribute in Ihrem HTML. Die Sicherstellung, dass diese Pfade korrekt sind, wird die meisten Probleme im Zusammenhang mit fehlenden Bildern beim Verwenden von IronPDF lösen.

Wie können HTML-Kopf- und Fußzeilen mit Bildern in PDFs gerendert werden?

HTML-Kopf- und Fußzeilen können mit Bildern in PDFs gerendert werden, indem für jede eine separate BaseURL festgelegt wird. Mit IronPDF werden Kopf- und Fußzeilen als eigenständige HTML-Dokumente behandelt, daher ist es wichtig, dass ihre Basispfade korrekt für das Laden von Assets eingestellt sind.

Können Sie lokale HTML-Dateien mit Assets in PDF konvertieren?

Ja, Sie können lokale HTML-Dateien mit Assets in PDF mit IronPDF konvertieren. Indem Sie sicherstellen, dass der BaseUrlOrPath auf das Verzeichnis der HTML-Datei gesetzt ist, wird IronPDF alle zugehörigen Assets wie CSS und Bilder korrekt laden.

Ist IronPDF vollständig kompatibel mit .NET 10, wenn Basis-URLs zum Laden von Assets verwendet werden?

Ja. IronPDF ist vollständig kompatibel mit .NET 10. Es unterstützt die Verwendung von BaseUrlOrPath – sowohl für lokale Dateipfade als auch für Web-URLs – zum Laden von Assets bei der HTML-zu-PDF-Konvertierung, ohne dass zusätzliche Anpassungen erforderlich sind. Sie können Basis-URLs in .NET-10-Projekten mit IronPDF genauso bedenkenlos verwenden wie in früheren Versionen.

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 16,154,058 | Version: 2025.11 gerade veröffentlicht