1. IronPDF
  2. Poradniki
  3. Base URLs & Asset Encoding
Jak używać adresów URL bazowych podczas generowania plików PDF w języku C#

Jak używać bazowych adresów URL i kodowania zasobów w C# .NET 10

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

Bazowe adresy URL w IronPDF pozwalają na prawidłowe załadowanie zasobów CSS, JavaScript i obrazów podczas konwersji HTML na PDF poprzez określenie parametru BaseUrlOrPath, który może być adresem URL strony internetowej lub lokalną ścieżką pliku dla względnego rozwiązania zasobów.

Szybki start: Implementacja bazowych adresów URL w IronPDF

Rozpocznij pracę z IronPDF, wdrażając bazowe adresy URL dla płynnego ładowania zasobów podczas konwersji HTML na PDF w .NET C#. Ten przykład pokazuje, jak ustawić BaseUrlOrPath, aby zapewnić prawidłowe odwoływanie się do wszystkich zasobów CSS, JavaScript i obrazów, upraszczając generowanie PDF z minimalną konfiguracją.

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Skopiuj i uruchom ten fragment kodu.

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

  3. Wdrożenie do testowania w środowisku produkcyjnym

    Rozpocznij używanie IronPDF w swoim projekcie już dziś z darmową wersją próbną

    arrow pointer

Minimalny proces (5 kroków)

  1. Pobierz IronPDF dla wsparcia HTML do CSS do obrazu
  2. Określ parametr BaseUrlOrPath dla zewnętrznych obrazów w HTML
  3. Skonfiguruj prawidłowo src w MVC dla wyświetlania w sieci i PDF
  4. Określ właściwość BaseUrl dla niestandardowych nagłówków i stopek
  5. Sprawdź wyjściowy PDF


Jak renderować PDF z ciągów HTML z zasobami obrazów i CSS?

Podczas konwertowania ciągów HTML na PDF, ustaw parametr BaseUrlOrPath dla zasobów takich jak CSS, pliki JavaScript i obrazy. BaseUrlOrPath określa bazowy adres URL, z którego ładują się wszystkie zasoby względne.

Może to być adres URL internetowy zaczynający się od 'http' do ładowania zasobów zdalnych lub lokalna ścieżka pliku do dostępu do zasobów na dysku. Prawidłowe ustawienie BaseUrlOrPath zapewnia właściwe ładowanie zasobów podczas konwersji. Więcej informacji na temat konwersji HTML na PDF znajdziesz w naszym obszernym samouczku HTML do PDF.

: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

W przypadku skomplikowanych scenariuszy z udziałem zewnętrznych zasobów, zapoznaj się z naszym przewodnikiem na temat zarządzania czcionkami lub dodawania obrazów do PDF.

Jak skonfigurować bazowe adresy URL w aplikacjach MVC?

W aplikacjach MVC określenie ścieżek plików obrazów wymaga starannej konfiguracji. Aby IronPDF poprawnie odnajdywał obrazy i wyświetlał je na stronie, należy odpowiednio skonfigurować baseUrl i atrybut HTML src="".

Przy poniższym układzie plików

  • baseUrlOrPath do @"wwwroot/image"
  • atrybut src do "../image/Sample.jpg"
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

Na przykład:

: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

Dla szczególnych implementacji ASP.NET Core MVC, odwołaj się do naszego przewodnika CSHTML do PDF (MVC Core).

Jakich formatów ścieżek plików należy unikać?

Ostrzeżenie

Formaty ścieżek plików, które nie działają

Te formaty działają w przeglądarce Chrome, ale wskazują na błędne katalogi w aplikacjach MVC. Działają z IronPDF, jeśli baseUrlOrPath jest dostarczone w metodzie RenderHtmlAsPdf:

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

Te formaty działają z aplikacjami MVC, ale zawodzą przy ścieżkach plików IronPDF:

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

)}]

Jakie są najczęstsze wskazówki dotyczące rozwiązywania problemów z ładowaniem zasobów?

Gdy zasoby nie ładują się, rozważ te kroki rozwiązywania problemów:

  1. Zweryfikuj ścieżki absolutne: Używaj absolutnych ścieżek plików podczas tworzenia, aby potwierdzić dostępność
  2. Sprawdź uprawnienia do plików: Upewnij się, że aplikacja ma dostęp do odczytu katalogów zasobów
  3. Testuj zdalne adresy URL: Używaj w pełni kwalifikowanych adresów URL, aby wyizolować problemy z ścieżką
  4. Włącz rejestrowanie: Używaj niestandardowego rejestrowania IronPDF do debugowania ładowania zasobów 
// 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);
Imports System.IO

' Example: Debug asset loading with absolute paths
Dim renderer As New ChromePdfRenderer()

' Enable debug logging
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(500) ' Give assets time to load

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

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

Jak dodać nagłówki i stopki HTML z obrazami?

Podczas renderowania nagłówków i stopek HTML do nowych lub istniejących plików PDF są one traktowane jako osobne dokumenty HTML i nie dziedziczą bazowego adresu URL z PDF. Dla obszernych opcji nagłówków i stopek, zobacz nasz przewodnik po nagłówkach i stopkach.

Ustaw bazowy URL, z którego zasoby mogą się ładować:

: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

Dlaczego nagłówki nie dziedziczą bazowych adresów URL z głównego dokumentu?

Nagłówki i stopki są renderowane jako oddzielne dokumenty HTML ze względów wydajności i izolacji. To podejście pozwala:

  • Niezależne stylizowanie bez wpływu na główną treść
  • Spójne renderowanie na wszystkich stronach
  • Lepsze zarządzanie pamięcią dla dużych dokumentów
  • Elastyczność w użyciu różnych źródeł zasobów

Jak ustawić różne bazowe adresy URL dla nagłówków i treści?

Określ różne bazowe adresy URL dla nagłówków, stopek i głównej treści, aby efektywnie organizować zasoby:

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);
Dim renderer As New ChromePdfRenderer()

' Main content base URL
Dim contentBaseUrl As String = "C:\website\public\"

' Header specific assets
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .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() With {
    .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
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl)
$vbLabelText   $csharpLabel

Jak konwertować pliki HTML na PDF z lokalnymi zasobami?

Podczas renderowania plików HTML na PDF wszystkie zasoby są traktowane jako lokalne dla tego pliku. Dowiedz się więcej o konwersji plików HTML w naszym przewodniku konwersji plików HTML na PDF.

: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

W powyższym przykładzie wszystkie pliki JS, CSS i obrazy ładują się z folderu C:\Assets na dysku - tego samego katalogu, co plik HTML.

Dla wygody można użyć CustomCssUrl w ChromePdfRenderOptions w sekcji Dodatkowe arkusze stylów, aby określić dodatkowy arkusz stylów używany wyłącznie przy renderowaniu PDF w .NET. Na przykład:

: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

Zwróć uwagęWłaściwość ChromePdfRenderOptions.CustomCssUrl aktualnie działa tylko przy renderowaniu z ciągów HTML do PDF za pomocą metody RenderHtmlAsPdf.

Kiedy należy używać CustomCssUrl do dodatkowego stylowania?

CustomCssUrl jest idealny do:

  • Stylów specyficznych dla druku: Ukrywanie menu nawigacyjnych lub elementów interaktywnych
  • Optymalizacji układu PDF: Dostosowywanie marginesów i przełamań stron dla druku
  • Formatowania warunkowego: Zastosowanie stylów tylko przy generowaniu PDF
  • Testowania A/B: Testowanie różnych układów PDF bez modyfikowania źródłowego HTML

Jak obsługiwać względne ścieżki zasobów w plikach HTML?

Podczas pracy z plikami HTML zawierającymi ścieżki względne upewnij się, że struktura plików wspiera odwołania:

// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");
// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");
Imports System.IO
Imports IronPdf

' Example HTML file structure
'
' C:\Projects\Reports\
'     ├── invoice.html
'     ├── css\
'     │   └── styles.css
'     ├── js\
'     │   └── calculations.js
'     └── images\
'         └── logo.png
'

' HTML content with relative paths
Dim htmlContent As String = "
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>"

' Save HTML and render
File.WriteAllText("C:\Projects\Reports\invoice.html", htmlContent)
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Projects\Reports\invoice.html")
pdf.SaveAs("invoice-output.pdf")
$vbLabelText   $csharpLabel

Jak kodować obrazy bezpośrednio w HTML używając Base64?

Zasoby obrazów mogą być kodowane bezpośrednio do plików lub ciągów HTML, unikając problemów z brakującymi obrazami. Użyj kodowania base64 dla tego podejścia. Przy pracy z różnymi formatami obrazów, zapoznaj się z naszym przewodnikiem po obrazach.

  1. Najpierw uzyskaj dane binarne obrazu, odczytując plik lub otrzymując je poprzez żądanie sieciowe.
  2. Użyj metody Convert.ToBase64String z Microsoft .NET do konwersji danych binarnych na base64.
  3. Zbuduj tag obrazu w HTML używając "data:image/svg+xml;base64," przed danymi base64. Zauważ, że typ obrazu jest określany przed danymi base64. Odwiedź dokumentację MDN Web Docs o typach i formatach obrazów dla więcej informacji o typach formatów obrazów.
: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

Kiedy wybrać kodowanie Base64 zamiast odwołań do plików?

Kodowanie base64 oferuje kilka zalet:

  • Samoistne HTML: Brak zależności zewnętrznych, co upraszcza dystrybucję
  • Kompatybilność międzyplatformowa: Działa niezależnie od różnic w systemie plików
  • Bezpieczeństwo: Brak dostępu do systemu plików, co zmniejsza ryzyko bezpieczeństwa
  • Niezawodność: Eliminuje błędy brakujących zasobów w produkcji
  • Kontrola wersji: Obrazy są częścią HTML, co upraszcza wersjonowanie

Należy jednak wziąć pod uwagę następujące kompromisy:

  • Zwiększony rozmiar HTML: Kodowanie base64 zwiększa rozmiar o około 33%
  • Brak cachowania: Osadzone obrazy nie mogą być oddzielnie keszowane
  • Użycie pamięci: Cały obraz musi być załadowany do pamięci

Jakie formaty obrazów najlepiej działają z kodowaniem Base64?

Różne formaty obrazów mają różną efektywność przy kodowaniu base64:

// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);

    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };

    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";
// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);

    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };

    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";
Imports System.IO

Public Function EncodeImageWithMimeType(imagePath As String) As String
    Dim imageBytes As Byte() = File.ReadAllBytes(imagePath)
    Dim base64 As String = Convert.ToBase64String(imageBytes)

    ' Determine MIME type based on extension
    Dim extension As String = Path.GetExtension(imagePath).ToLower()
    Dim mimeType As String = extension.ToLower() Select Case extension
        Case ".png"
            mimeType = "image/png" ' Best for graphics with transparency
        Case ".jpg", ".jpeg"
            mimeType = "image/jpeg" ' Best for photographs
        Case ".gif"
            mimeType = "image/gif" ' Best for simple animations
        Case ".svg"
            mimeType = "image/svg+xml" ' Best for scalable graphics
        Case ".webp"
            mimeType = "image/webp" ' Best overall compression
        Case Else
            mimeType = "image/png" ' Default fallback
    End Select

    Return $"data:{mimeType};base64,{base64}"
End Function

' Usage
Dim encodedImage As String = EncodeImageWithMimeType("logo.png")
Dim html As String = $"<img src='{encodedImage}' alt='Company Logo'>"
$vbLabelText   $csharpLabel

Jak kodowanie Base64 wpływa na rozmiar pliku PDF?

Kodowanie Base64 wpływa na rozmiar PDF w przewidywalny sposób:

// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();

    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");

    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);

    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}
// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();

    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");

    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);

    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}
' Comparison example
Public Sub CompareFileSizes()
    Dim renderer As New ChromePdfRenderer()

    ' Method 1: External image reference
    Dim htmlExternal As String = "<img src='large-photo.jpg'>"
    Dim pdfExternal As PdfDocument = renderer.RenderHtmlAsPdf(htmlExternal, "C:\images\")

    ' Method 2: Base64 encoded image
    Dim imageBytes As Byte() = File.ReadAllBytes("C:\images\large-photo.jpg")
    Dim base64Image As String = Convert.ToBase64String(imageBytes)
    Dim htmlBase64 As String = $"<img src='data:image/jpeg;base64,{base64Image}'>"
    Dim pdfBase64 As PdfDocument = renderer.RenderHtmlAsPdf(htmlBase64)

    ' Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length \ 1024} KB")
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length \ 1024} KB")
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length \ 1024} KB")
End Sub
$vbLabelText   $csharpLabel

Dla optymalnych rezultatów:

  • Używaj base64 dla małych ikon i logo (< 50KB)
  • Używaj zewnętrznych odwołań dla dużych obrazów i fotografii
  • Rozważ kompresję przed kodowaniem
  • Użyj odpowiednich formatów obrazów dla rodzaju treści

Dla zaawansowanych technik optymalizacji PDF zapoznaj się z naszym przewodnikiem po kompresji PDF.

Często Zadawane Pytania

How do I ensure CSS and JavaScript assets load correctly when converting HTML to PDF?

IronPDF allows you to specify a BaseUrlOrPath parameter during HTML to PDF conversion. This parameter can be a web URL or local file path that serves as the base reference for all relative asset paths in your HTML, ensuring CSS, JavaScript, and images load properly.

What is the BaseUrlOrPath parameter used for?

The BaseUrlOrPath parameter in IronPDF specifies the base URL from which all assets (CSS, JavaScript, images) load relative to during HTML to PDF conversion. It can be set to either a web URL starting with 'http' for remote assets or a local file path for disk-based assets.

How can I render a PDF with assets in just one line of code?

You can use IronPDF's ChromePdfRenderer to render HTML with assets in one line: `new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", @"C:\site\assets\").SaveAs("with-assets.pdf");`. This sets the BaseUrlOrPath to ensure all assets are properly loaded.

How do I configure image paths in MVC applications for PDF generation?

In MVC applications using IronPDF, set the baseUrlOrPath to your wwwroot subdirectory (e.g., @"wwwroot/image") and configure the HTML src attribute with the relative path (e.g., "../image/Sample.jpg"). This ensures images display correctly both on the website and in the generated PDF.

Can I use both local and remote assets when converting HTML to PDF?

Yes, IronPDF supports both local and remote assets. For remote assets, set BaseUrlOrPath to a web URL starting with 'http'. For local assets, use a file path on your disk. This flexibility allows you to reference assets from various sources during PDF generation.

What happens if I don't set the BaseUrlOrPath parameter?

Without setting the BaseUrlOrPath parameter in IronPDF, relative asset paths in your HTML won't resolve correctly, resulting in missing CSS styles, JavaScript functionality, and images in your generated PDF. Always specify this parameter when your HTML contains relative asset references.

Curtis Chau
Curtis Chau
  Czat z zespołem inżynierów teraz
Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podrę...

Czytaj więcej
Gotowy, aby rozpocząć?
Nuget Pliki do pobrania 18,135,201 | Wersja: 2026.4 just released
Still Scrolling Icon

Wciąż przewijasz?

Czy chcesz szybko dowodu? PM > Install-Package IronPdf
Uruchom przykład i zobacz, jak Twój kod HTML zamienia się w plik PDF.