1. IronPDF
  2. Poradniki
  3. URL podstawowe i kodowanie zasobów
Jak używać adresów URL bazowych podczas generowania plików PDF w języku C#

How to Use Base URLs & Asset Encoding in C# .NET 10

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

Podstawowe adresy URL w IronPDF umożliwiają prawidłowe ładowanie zasobów CSS, JavaScript i obrazów podczas konwersji HTML do PDF poprzez określenie parametru BaseUrlOrPath, który może być adresem URL lub lokalną ścieżką do pliku w celu względnego rozpoznawania 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łania do wszystkich plików CSS, JavaScript i obrazów, upraszczając generowanie plików PDF przy minimalnej konfiguracji.

  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 poprawny src w MVC do wyświetlania w sieci i PDF
  4. Określ niestandardowe nagłówki i stopki przy użyciu właściwości BaseUrl
  5. Sprawdź wyjściowy PDF

Convert.ToBase64String


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

Podczas konwersji ciągów HTML do formatu PDF należy ustawić parametr BaseUrlOrPath dla zasobów takich jak pliki CSS, JavaScript i obrazy. BaseUrlOrPath określa podstawowy adres URL, względem którego ładowane są wszystkie zasoby. CustomCssUrl

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 prawidłowe ł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 skomplikówanych 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 zapewnić, że IronPDF znajdzie obrazy i wyświetli je poprawnie na stronie internetowej, należy prawidłowo skonfigurować atrybut baseUrl oraz 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).

Jakie formaty ścieżek plików powinienem unikać?

Ostrzeżenie

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

Formaty te działają w przeglądarce Chrome, ale w aplikacjach MVC wskazują na niewłaściwe katalogi. Działają one z IronPDF, jeśli w metodzie RenderHtmlAsPdf podano baseUrlOrPath:

<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: Podczas rozwoju używaj absolutnych ścieżek plików, aby potwierdzić dostępność
  2. Sprawdź uprawnienia do plików: Upewnij się, że aplikacja ma odczytowy dostęp do katalogów zasobów
  3. Przetestuj zdalne URL: Używaj w pełni kwalifikowanych URL, aby izolować problemy ze ścieżkami
  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 samodzielne dokumenty HTML i nie dziedziczą BaseURL z pliku PDF. Dla obszernych opcji nagłówków i stopek, zobacz nasz przewodnik po nagłówkach i stopkach.

Ustaw BaseURL, z którego mogą być ładowane zasoby: ChromePdfRenderOptions

Dłączego 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 stylowanie bez wpływania na główne treści
  • 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, w HtmlToPdf dla dodatkowych arkuszy stylów użyj CustomCssUrl, aby określić dodatkowy arkusz stylów używany wyłącznie do renderowania plików PDF w środowisku .NET, jeśli jest to pożądane. 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

CustomCssUrl

Zwróć uwagęWłaściwość ChromePdfRenderOptions.CustomCssUrl działa obecnie tylko podczas renderowania ciągów HTML do plików PDF przy użyciu metody RenderHtmlAsPdf.)})]

Kiedy powinienem używać CustomCssUrl dla dodatkowego stylowania?

CustomCssUrl jest idealny dla:

  • Style specyficzne dla wydruku: Ukryj menu nawigacyjne lub elementy interaktywne
  • Optymalizacja układu PDF: Dostosuj marginesy i przerwy między stronami do wydruku
  • Formatowanie warunkowe: Zastosuj style tylko podczas generowania PDFów
  • 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. Użyj kodowania base64 dla tego podejścia. Użyj kodowania base64 dla tego podejścia:

  1. Najpierw pobierz dane binarne obrazu przez odczyt pliku lub odbierając go przez żądanie sieciowe.
  2. Użyj metody Convert.ToBase64String w Microsoft .NET, aby przekonwertować dane binarne 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

Dłączego wybrałbym kodowanie Base64 nad odwołaniami do plików?

Kodowanie base64 oferuje kilka zalet:

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

Jednak weź pod uwagę te kompromisy:

  • Zwiększony rozmiar HTML: Kodowanie base64 zwiększa rozmiar o około 33%
  • Brak pamięci podręcznej: Wbudowane obrazy nie mogą być oddzielnie pamięciowane
  • 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żyj base64 dla małych ikon i logo (< 50KB)
  • Użyj zewnętrznych odnośników dla dużych obrazów i fotografii
  • Uwzględnij kompresję przed zakodowaniem
  • Używaj odpowiednich formatów obrazów dla typu treści

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

Często Zadawane Pytania

Jak mogę zapewnić prawidłowe ładowanie zasobów CSS i JavaScript przy konwersji HTML do PDF?

IronPDF pozwala ci określić parametr BaseUrlOrPath podczas konwersji HTML do PDF. Ten parametr może być URL-em sieciowym lub ścieżką do lokalnego pliku, który służy jako podstawowe odniesienie dla wszystkich względnych ścieżek zasobów w twoim HTML, zapewniając prawidłowe ładowanie CSS, JavaScript i obrazów.

Do czego służy parametr BaseUrlOrPath?

Parametr BaseUrlOrPath w IronPDF określa podstawowy URL, z którego wszystkie zasoby (CSS, JavaScript, obrazy) są ładowane względnie podczas konwersji HTML do PDF. Może być ustawiony na URL sieciowy zaczynający się od 'http' dla zasobów zdalnych lub lokalną ścieżkę pliku dla zasobów dyskowych.

Jak mogę wyrenderować PDF z zasobami w jednym wierszu kodu?

Możesz użyć ChromePdfRenderer IronPDF, aby wyrenderować HTML z zasobami w jednym wierszu: `new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", "C:\\site\\assets\\").SaveAs("with-assets.pdf");`. To ustawia BaseUrlOrPath, aby zapewnić prawidłowe załadowanie wszystkich zasobów.

Jak skonfigurować ścieżki obrazów w aplikacjach MVC do generowania PDF?

W aplikacjach MVC używających IronPDF ustaw baseUrlOrPath na swój podkatalog wwwroot (np. "wwwroot/image") i skonfiguruj atrybut src HTMLa z względną ścieżką (np. "../image/Sample.jpg"). To zapewnia prawidłowe wyświetlanie obrazów zarówno w witrynie, jak i w generowanym PDF.

Czy mogę używać zarówno lokalnych, jak i zdalnych zasobów przy konwersji HTML do PDF?

Tak, IronPDF obsługuje zarówno lokalne, jak i zdalne zasoby. Dla zdalnych zasobów, ustaw BaseUrlOrPath na URL sieciowy zaczynający się 'http'. Dla lokalnych zasobów, użyj ścieżki pliku na dysku. Ta elastyczność pozwala ci odwoływać się do zasobów z różnych źródeł podczas generowania PDF.

Co się stanie, jeśli nie ustawię parametru BaseUrlOrPath?

Bez ustawienia parametru BaseUrlOrPath w IronPDF, względne ścieżki zasobów w twoim HTML nie będą się poprawnie rozwiązywać, co spowoduje brakujące style CSS, funkcjonalność JavaScript oraz obrazy w twoim wygenerowanym PDF. Zawsze określ ten parametr, gdy twój HTML zawiera względne odniesienia do zasobów.

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,926,724 | Wersja: 2026.5 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.