1. IronPDF
  2. 操作指南
  3. 基礎網址與資源編碼
如何在 C# 生成 PDF 時使用基礎網址

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

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

IronPDF 中的基礎 URL 允許透過指定 BaseUrlOrPath 參數，在 HTML 轉 PDF 過程中正確載入 CSS、JavaScript 和圖像資源；該參數可以是網頁 URL，亦可作為相對資源解析的本地檔案路徑。

快速入門：在 IronPDF 中實作基礎 URL

透過在 .NET C# 中實作基礎 URL，讓 HTML 轉 PDF 過程能無縫載入資源，立即開始使用 IronPDF。 此範例展示如何設定 BaseUrlOrPath，以確保所有 CSS、JavaScript 和圖片皆能正確引用，藉此簡化 PDF 生成流程，並將設定工作降至最低。

  1. using NuGet 套件管理員安裝 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 請複製並執行此程式碼片段。

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

  3. 部署至您的生產環境進行測試

    立即透過免費試用，在您的專案中開始使用 IronPDF

    arrow pointer

簡化工作流程（5 個步驟）

  1. 下載 IronPDF 以支援 HTML 轉 CSS 轉圖像功能
  2. 針對 HTML 中的外部圖片，請指定 BaseUrlOrPath 參數
  3. 在 MVC 中設定正確的 src 以供網頁及 PDF 顯示
  4. 使用 BaseUrl 屬性指定自訂頁首與頁尾
  5. 檢查輸出 PDF

Convert.ToBase64String


如何從包含圖片和 CSS 資源的 HTML 字串渲染 PDF 檔案？

將 HTML 字串轉換為 PDF 時，請針對 CSS、JavaScript 檔案及圖片等資源設定 BaseUrlOrPath 參數。 BaseUrlOrPath 指定了所有資源載入時所參照的基準 URL。 CustomCssUrl

此參數可以是開頭為"http"的網頁網址，用於載入遠端資源；或是本地檔案路徑，用於存取磁碟上的資源。 正確設定 BaseUrlOrPath 可確保資產在轉換過程中能正確載入。 如需更多關於 HTML 轉 PDF 的詳細資訊，請參閱我們的完整 HTML 轉 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

若涉及外部資源的複雜情境，請參閱我們關於管理字型或將圖片加入 PDF 的指南。

如何在 MVC 應用程式中設定基礎 URL？

在 MVC 應用程式中，指定圖片檔案路徑需要仔細配置。 為確保 IronPDF 能正確識別並在網站上顯示圖片，請妥善設定 baseUrl 及 HTML src="" 屬性。

設定如下所示的檔案層級結構

  • baseUrlOrPath 至 @"wwwroot/image"
  • src 屬性對應至 "../image/Sample.jpg"
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

例如：

: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

關於 ASP.NET Core MVC 的具體實作，請參閱我們的《CSHTML 轉 PDF (MVC Core) 指南》。

我應該避免使用哪些檔案路徑格式？

警告

無法使用的檔案路徑格式

這些格式在 Chrome 瀏覽器中可正常運作，但在 MVC 應用程式中會指向錯誤的目錄。若在 RenderHtmlAsPdf 方法中提供 baseUrlOrPath，則可與 IronPDF 配合使用：

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

這些格式適用於 MVC 應用程式，但在 IronPDF 檔案路徑方面會出現錯誤：

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

)}]

資產載入的常見疑難排解技巧有哪些？

當資源無法載入時，請考慮採取以下疑難排解步驟：

  1. 驗證絕對路徑：開發過程中請使用絕對檔案路徑以確認可存取性
  2. 檢查檔案權限：確保應用程式對資產目錄具有讀取權限
  3. 使用遠端 URL 進行測試：採用完整網址以隔離路徑相關問題
  4. 啟用記錄功能：使用 IronPDF 的自訂記錄功能來除錯資產載入
// 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

如何在 HTML 中加入帶有圖片的頁首和頁尾？

在將 HTML 頁首與頁尾渲染至新或現有 PDF 檔案時，這些內容將被視為獨立的 HTML 文件，不會從 PDF 檔案繼承 BaseURL 標記。 如需完整的頁首與頁尾選項，請參閱我們的頁首與頁尾指南。

設定 BaseURL 作為資產載入來源：ChromePdfRenderOptions

為何標頭無法從主文件繼承基礎網址？

為提升效能與隔離性，頁首與頁尾會以獨立的 HTML 文件形式呈現。 此設計允許：

  • 獨立格式設定，不影響主要內容
  • 所有頁面呈現風格一致
  • 針對大型文件提供更完善的記憶體管理
  • 具備使用不同資產來源的靈活性

如何為標頭與內容設定不同的基礎 URL？

請為頁首、頁尾及主要內容指定不同的基礎 URL，以有效組織資產：

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

如何使用 Local Assets 將 HTML 檔案轉換為 PDF？

在將 HTML 檔案渲染為 PDF 時，系統預設所有資源皆位於該檔案的同層目錄中。請參閱我們的《HTML 檔案轉 PDF 指南》，進一步了解 HTML 檔案轉換相關資訊。

: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

在上述範例中，所有 JS、CSS 和圖片檔案皆從磁碟上的 C:\Assets 資料夾載入——該資料夾與 HTML 檔案位於同一目錄。

為方便起見，若需指定僅用於 .NET PDF 渲染的額外樣式表，請在 HtmlToPdf 中使用 CustomCssUrl 來指定。 例如：

: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

請注意ChromePdfRenderOptions.CustomCssUrl 屬性目前僅在使用 RenderHtmlAsPdf 方法將 HTML 字串渲染為 PDF 時生效。

何時應使用 CustomCssUrl 進行額外樣式設定？

CustomCssUrl 最適合：

  • PRINT專用樣式：隱藏導覽選單或互動式元素
  • PDF 版面配置優化：調整邊距與分頁設定以利 PRINT
  • 條件格式化：僅在產生 PDF 時套用樣式
  • A/B 測試：在不修改原始 HTML 的情況下，測試不同的 PDF 版面配置

如何處理 HTML 檔案中的相對資產路徑？

處理包含相對路徑的 HTML 檔案時，請確保您的檔案結構支援這些參照：

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

如何使用 Base64 直接在 HTML 中編碼圖片？

圖片資源可直接嵌入 HTML 檔案或字串中，以避免圖片缺失的問題。 此方法請使用 base64 編碼。 此方法請使用 base64 編碼。 此方法請使用 base64 編碼：

  1. 首先透過讀取檔案或透過網路請求接收，取得影像的二進位資料。
  2. 使用 Microsoft .NET 中的 Convert.ToBase64String 方法，將二進位資料轉換為 base64。
  3. 在 HTML 中建立 image 標籤時，請在 base64 資料前使用 "data:image/svg+xml;base64,"。 請注意，base64 資料前會標示圖片類型。 如需更多關於影像格式類型的資訊，請參閱 MDN Web Docs 上的《影像類型與格式》文章。
: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

為何要選擇 Base64 編碼而非檔案參照？

Base64 編碼具備以下幾項優勢：

  • 自包含 HTML：無外部依賴項，簡化分發流程
  • 跨平台相容性：不受檔案系統差異影響，皆可正常運作
  • 安全性：無需存取檔案系統，降低安全風險
  • 可靠性：消除生產環境中的資產遺失錯誤
  • 版本控制：圖片嵌入 HTML 中，簡化版本管理

然而，請考量以下權衡因素：

  • HTML 檔案大小增加：Base64 編碼會使檔案大小增加約 33%
  • 不支援快取：嵌入的圖片無法獨立快取
  • 記憶體使用：整張圖片必須載入記憶體中

哪些圖像格式最適合使用 Base64 編碼？

不同圖像格式在進行 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

Base64 編碼如何影響 PDF 檔案大小？

Base64 編碼會以可預測的方式影響 PDF 檔案大小：

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

為獲得最佳效果：

  • 小型圖示與標誌（< 50KB）請使用 base64 編碼
  • 大型圖片及照片請使用外部連結
  • 編碼前請考慮壓縮
  • 根據內容類型選用適當的圖片格式

如需進階的 PDF 優化技巧，請參閱我們的 PDF 壓縮指南。

常見問題

如何確保在將 HTML 轉換為 PDF/A 時，CSS 和 JavaScript 資源能正確載入？

IronPDF 允許您在 HTML 轉 PDF 過程中指定 BaseUrlOrPath 參數。此參數可以是網頁 URL 或本機檔案路徑，作為 HTML 中所有相對資源路徑的基準參考，確保 CSS、JavaScript 和圖片能正確載入。

BaseUrlOrPath 參數用於什麼用途？

IronPDF 中的 BaseUrlOrPath 參數用於指定在 HTML 轉 PDF 過程中，所有資源（CSS、JavaScript、圖片）的載入基準網址。該參數可設定為以 'http' 開頭的網際網路網址（用於遠端資源），或設定為本地檔案路徑（用於磁碟上的資源）。

如何僅用一行程式碼即可渲染包含資源的 PDF 檔案？

您可以使用 IronPDF 的 ChromePdfRenderer，僅需一行程式碼即可渲染包含資源的 HTML：`new IronPdf.ChromePdfRenderer().RenderHtmlAsPDF("", @"C:\site\assets\").SaveAs("with-assets.pdf");`。此設定會設定 BaseUrlOrPath，以確保所有資源皆能正確載入。

如何在 MVC 應用程式中設定 PDF 生成的圖片路徑？

在使用 IronPDF 的 MVC 應用程式中，請將 baseUrlOrPath 設定為您的 wwwroot 子目錄（例如 @"wwwroot/image"），並將 HTML 的 src 屬性設定為相對路徑（例如 "../image/Sample.jpg"）。此設定可確保圖片在網站上及生成的 PDF 中皆能正確顯示。

在將 HTML 轉換為 PDF 時，是否可以同時使用本地和遠端資源？

是的，IronPDF 同時支援本地與遠端資源。對於遠端資源，請將 BaseUrlOrPath 設定為以 'http' 開頭的網頁網址。對於本地資源，請使用您磁碟上的檔案路徑。這種靈活性讓您能在生成 PDF 時，從各種來源引用資源。

若未設定 BaseUrlOrPath 參數，將會發生什麼情況？

若未在 IronPDF 中設定 BaseUrlOrPath 參數，HTML 中的相對資源路徑將無法正確解析，導致生成的 PDF 中缺少 CSS 樣式、JavaScript 功能及圖片。當您的 HTML 包含相對資源引用時，請務必指定此參數。

Curtis Chau
Curtis Chau
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。