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

Verwendung von Basis-URLs und Asset-Codierung in C# .NET 10

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

Basis-URLs in IronPDF ermöglichen das korrekte Laden von CSS-, JavaScript- und Bild-Assets während der HTML-zu-PDF-Konvertierung durch Angabe des Parameters BaseUrlOrPath, der eine Web-URL oder ein lokaler Dateipfad für eine relative Asset-Auflösung sein kann.

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

Beginnen Sie mit IronPDF, indem Sie Basis-URLs für nahtloses Laden von Assets während der Konvertierung von HTML in PDF in .NET C# implementieren. Dieses Beispiel zeigt, wie die BaseUrlOrPath gesetzt wird, um sicherzustellen, dass alle CSS, JavaScript und Bilder korrekt referenziert werden, was die PDF-Erzeugung bei minimaler Einrichtung vereinfacht.

Nuget IconLegen Sie jetzt mit NuGet los, um PDFs zu erstellen:

  1. Installieren Sie IronPDF mit dem NuGet-Paketmanager.

    PM > Install-Package IronPdf

  2. Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.

    new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.pdf");

  3. Bereitstellen zum Testen in Ihrer Live-Umgebung

    Beginnen Sie noch heute mit der Nutzung von IronPDF in Ihrem Projekt – mit einer kostenlosen Testversion.
    arrow pointer

Minimaler Arbeitsablauf (5 Schritte)

  1. Herunterladen von IronPDF für HTML to CSS to Image Support
  2. Angabe des Parameters BaseUrlOrPath für externe Bilder in HTML
  3. Konfigurieren Sie die korrekte src in MVC für die Web- und PDF-Anzeige
  4. Angeben der BaseUrl-Eigenschaft für benutzerdefinierte Kopf- und Fußzeilen
  5. Überprüfen Sie das Ausgabe-PDF


Wie rendere ich PDFs aus HTML-Strings mit Bild- und CSS-Assets?

Legen Sie bei der Konvertierung von HTML-Strings in PDF einen BaseUrlOrPath-Parameter für Elemente wie CSS, JavaScript-Dateien und Bilder fest. Der BaseUrlOrPath gibt die Basis-URL an, von der aus alle Assets relativ zu ihr geladen werden.

Dies kann eine Web-URL sein, die mit "http" beginnt, um Remote-Assets zu laden, oder ein lokaler Dateipfad für den Zugriff auf Assets auf der Festplatte. Durch die korrekte Einstellung von BaseUrlOrPath wird sichergestellt, dass die Inhalte bei der Konvertierung korrekt geladen werden. Weitere Einzelheiten zur Konvertierung von HTML in PDF finden Sie in unserem umfassenden HTML zu PDF Tutorial.

: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");
$vbLabelText   $csharpLabel

Für komplexe Szenarien, bei denen externe Assets zum Einsatz kommen, lesen Sie unseren Leitfaden zur Verwaltung von Schriftarten oder Hinzufügen von Bildern zu PDFs.

Wie konfiguriere ich Basis-URLs in MVC-Anwendungen?

In MVC-Anwendungen erfordert die Angabe von Bilddateipfaden eine sorgfältige Konfiguration. To ensure IronPDF finds images and displays them correctly on the website, configure the baseUrl and HTML src="" attribute properly.

Mit der unten gezeigten Dateihierarchie

  • baseUrlOrPath zu @"wwwroot/image"
  • src Attribut zu "../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");
$vbLabelText   $csharpLabel 
<!-- Correct image references for MVC -->
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
<!-- Correct image references for MVC -->
<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

ASP.NET Core MVC-spezifische Implementierungen finden Sie in unserem CSHTML to PDF (MVC Core) guide.

Welche Dateipfadformate sollte ich vermeiden?

Warnung

Dateipfadformate, die nicht funktionieren

Diese Formate funktionieren im Chrome-Browser, verweisen aber auf falsche Verzeichnisse in MVC-Anwendungen. Sie funktionieren 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

Diese Formate funktionieren mit MVC-Anwendungen, aber nicht mit IronPDF-Dateipfaden:

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

@@--KLAMMER-SCHLIESSEN--@@

Was sind allgemeine Tipps zur Fehlerbehebung beim Laden von Assets?

Wenn Assets nicht geladen werden können, sollten Sie diese Schritte zur Fehlerbehebung beachten:

  1. Überprüfen Sie absolute Pfade: Verwenden Sie während der Entwicklung absolute Dateipfade, um die Zugänglichkeit zu bestätigen
  2. Dateiberechtigungen prüfen: Sicherstellen, dass die Anwendung Lesezugriff auf Asset-Verzeichnisse hat
  3. Testen Sie mit Remote-URLs: Verwenden Sie vollständig qualifizierte URLs, um Pfadprobleme zu isolieren
  4. Protokollierung aktivieren: Verwenden Sie die Benutzerdefinierte Protokollierung von IronPDF, um das Laden von Assets zu debuggen 
// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);
// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);
$vbLabelText   $csharpLabel

Wie füge ich HTML-Kopf- und -Fußzeilen mit Bildern hinzu?

Beim Rendern von HTML-Kopf- und -Fußzeilen in neue oder bestehende PDF-Dateien werden diese als eigenständige HTML-Dokumente behandelt und erben nicht die BaseURL der PDF-Datei. Umfassende Optionen für Kopf- und Fußzeilen finden Sie in unserem Handbuch für Kopf- und Fußzeilen.

Legen Sie eine BaseURL fest, 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
};
$vbLabelText   $csharpLabel

Warum erben Kopfzeilen nicht die Basis-URLs vom Hauptdokument?

Kopf- und Fußzeilen werden aus Leistungs- und Isolationsgründen als separate HTML-Dokumente dargestellt. Dieses Design ermöglicht:

  • Unabhängiges Styling ohne Beeinträchtigung des Hauptinhalts
  • Konsistentes Rendering auf allen Seiten
  • Bessere Speicherverwaltung für große Dokumente
  • Flexibilität bei der Verwendung verschiedener Asset-Quellen

Wie lege ich unterschiedliche Basis-URLs für Header und Inhalt fest?

Geben Sie unterschiedliche Basis-URLs für Kopf- und Fußzeilen sowie den Hauptinhalt an, um die Inhalte effektiv zu organisieren:

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);
$vbLabelText   $csharpLabel

Wie konvertiere ich HTML-Dateien in PDF mit lokalen Assets?

Bei der Konvertierung von HTML-Dateien in PDF wird davon ausgegangen, dass alle Inhalte in der jeweiligen Datei enthalten sind. Erfahren Sie mehr über die Konvertierung von HTML-Dateien in unserem HTML-Datei in PDF-Leitfaden.

: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");
$vbLabelText   $csharpLabel

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

For convenience, use CustomCssUrl in ChromePdfRenderOptions for Additional Stylesheets to specify an additional stylesheet used only for .NET PDF rendering if desired. 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");
$vbLabelText   $csharpLabel

[{i:(Die Eigenschaft ChromePdfRenderOptions.CustomCssUrl funktioniert derzeit nur beim Rendering von HTML-Strings in PDFs mit der Methode RenderHtmlAsPdf.