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

Q: 如何確保在將HTML轉換為PDF時CSS和JavaScript資源載入正確？

IronPDF允許您在HTML到PDF轉換過程中指定BaseUrlOrPath參數。這個參數可以是網路URL或本地文件路徑，作為在您的HTML中所有相對資源路徑的基準，確保CSS、JavaScript和圖片正確載入。

Q: BaseUrlOrPath參數的用途是什麼？

IronPDF中的BaseUrlOrPath參數指定了在HTML到PDF轉換期間所有資源（CSS、JavaScript、圖片）載入的基準URL。它可以設置為以'http'開頭的網路URL以載入遠端資源，或本地文件路徑以載入基於磁碟的資源。

Q: 如何僅用一行程式碼渲染包含資產的PDF？

您可以使用IronPDF的ChromePdfRenderer用一行程式碼渲染包含資產的HTML：`new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", @"C:\site\assets\").SaveAs("with-assets.pdf");`。這將設置BaseUrlOrPath以確保所有資產正確載入。

Q: 如何在MVC應用程式中為PDF生成配置圖片路徑？

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

Q: 我可以在將HTML轉換為PDF時同時使用本地和遠端資源嗎？

可以，IronPDF支援本地和遠端資源。對於遠端資源，將BaseUrlOrPath設置為以'http'開頭的網路URL。對於本地資源，使用磁碟上的文件路徑。這種靈活性允許您在PDF生成期間從各種來源引用資源。

Q: 如果我不設置BaseUrlOrPath參數，會發生什麼情況？

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

Q: How does Base64 encoding affect the size of my PDFs?

Base64 encoding increases HTML and subsequently PDF size due to data being represented in a larger format. Use it for smaller images, while larger assets should use external references to optimize PDF size.

Q: What are the benefits of using Base64 encoding in IronPDF?

Base64 encoding benefits include creating self-contained HTML, ensuring cross-platform compatibility, reducing security risks by eliminating file system access, and preventing missing asset errors in live environments.

Q: How do I handle relative asset paths in HTML files for PDF conversion in IronPDF?

Ensure your file structure supports the relative paths in your HTML file, and use `RenderHtmlFileAsPdf` from IronPDF to convert HTML files to PDFs while correctly loading CSS and JavaScript resources.

Q: Why don't headers and footers in IronPDF inherit Base URLs from the main document?

Headers and footers in IronPDF do not inherit Base URLs from the main document to maintain styling independence, ensure consistent rendering, and allow flexible asset organization for optimal PDF creation.

Curtis Chau

Updated: 2026年6月4日

在 IronPDF 中使用基礎 URL 允許在 HTML 至 PDF 轉換過程中正確載入 CSS、JavaScript 和影像資產，這是透過設定 BaseUrlOrPath 參數來實現的，該參數可以是網路 URL 或本地檔案路徑以解決相對資產載入的問題。

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

透過在 .NET C# 中實作基礎 URL，開始使用 IronPDF，使得在 HTML 至 PDF 轉換時能順利地載入資產。此範例示範如何設置 BaseUrlOrPath 以確保所有 CSS、JavaScript 和圖像被正確引用，簡化僅需最少設置的 PDF 生成功能。

1Install IronPDF with NuGet Package Manager
PM > Install-Package IronPdf
```
Install-Package IronPdf
```

2複製並運行這段程式碼片段。

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

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

3部署以在您的實時環境中測試

今天就開始在您的專案中使用IronPDF，透過免費試用

最小工作流程（5步）

下載 IronPDF 支援 HTML 到 CSS 與影像
在 HTML 中為外部圖像指定 BaseUrlOrPath 參數
在 MVC 中為網頁和 PDF 顯示配置正確的 src
使用 BaseUrl 屬性指定自訂的頁眉和頁腳
檢查輸出的 PDF

Convert.ToBase64String

我如何從包含影像和 CSS 資產的 HTML 字串渲染 PDF？

將 HTML 字串轉換為 PDF 時，為資產如 CSS、JavaScript 檔案和影像設置 BaseUrlOrPath 參數。 BaseUrlOrPath 指定從該基礎 URL 載入所有資產。 CustomCssUrl

這可以是一個以 'http' 開頭的網路 URL 來載入遠端資產，或是一個本地檔案路徑來存取磁碟上的資產。正確設定 BaseUrlOrPath 可確保在轉換過程中正確載入資產。如需有關 HTML 至 PDF 轉換的更詳細資訊，請查看我們的完整 HTML 至 PDF 教學。

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

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

Dim renderer As New ChromePdfRenderer()

Dim baseUrl As String = "C:\site\assets\"
Dim html As String = "<img src='icons/iron.png'>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

pdf.SaveAs("html-with-assets.pdf")

Dim renderer As New ChromePdfRenderer()

Dim baseUrl As String = "C:\site\assets\"
Dim html As String = "<img src='icons/iron.png'>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

pdf.SaveAs("html-with-assets.pdf")

針對涉及外部資產的複雜情境，請參考我們的指南，看看如何管理字型或新增圖像至 PDF。

我如何在 MVC 應用程式中配置基礎 URL？

在 MVC 應用程式中，指定影像檔案路徑需要小心配置。為確保 IronPDF 能找到影像並正確顯示在網站上，需正確配置 baseUrl 和 HTML的 src="" 屬性。

如下設定檔案階層

baseUrlOrPath 至 "wwwroot/image"
src 屬性至 "../image/Sample.jpg"

wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

Text

例如：

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");

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

' Instantiate ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")

<!-- 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 特定實作，請參閱我們的 CSHTML to PDF (MVC Core) 指南。

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

警告:

無法使用的檔案路徑格式

這些格式在 Chrome 瀏覽器中有效但指向 MVC 應用中的錯誤目錄。若在 baseUrlOrPath 方法中提供 RenderHtmlAsPdf，這些格式在 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

)}]

資產載入的常見疑難排解建議有哪些？

當資產無法載入時，請考慮以下故障排除步驟：

驗證絕對路徑：在開發過程中使用絕對檔案路徑來確認可存取性
檢查檔案權限：確保應用程式有資產目錄的讀取權限
使用遠端 URL 測試：使用完整的 URL 識別路徑問題
啟用日誌記錄：使用 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)

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)

我如何新增包含影像的 HTML 頁眉和頁腳？

渲染到新或現有 PDF 的 HTML 頁眉和頁腳將被視為獨立的 HTML 文件，且不會繼承來自 PDF 的 BaseURL。如需完整的頁眉和頁腳選項，請參閱我們的頁眉和頁腳指南。

設置一個 ChromePdfRenderOptions

為什麼頁眉不繼承主文件的基礎 URL？

頁眉和頁腳以獨立的 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)

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)

我最喜歡的程式庫是IronPDF。它允許快速高效地操作PDF文件。它還有許多有價值的功能，例如導出到PDF/A格式和數位簽署PDF文件。

Milan Jovanovic

Microsoft MVP

查看案例研究

IronOCR意味著我們每年可以從手動處理中節省$40,000，同時提高生產力，釋放資源以進行高影響的任務。我會強烈推薦它。

Brent Matzelle

首席技術官，OPYN

查看案例研究

我如何將包含本地資產的 HTML 檔案轉換為 PDF？

將 HTML 檔案渲染為 PDF 時，所有資產都假定是該檔案的本地資產。瞭解更多有關轉換 HTML 檔案的資訊，請參閱我們的 HTML 檔案到 PDF 的指南。

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

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

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

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

為了方便起見，請在 HtmlToPdf 中使用 CustomCssUrl 設定附加樣式表，以指定僅在 .NET PDF 渲染時使用的額外樣式表。例如：

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

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

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

CustomCssUrl

請注意: @@ChromePdfRenderOptions.CustomCssUrl 屬性目前僅在使用 @@RenderHtmlAsPdf 方法從 HTML 字串渲染為 PDF 時運作。}

何時應使用 CustomCssUrl 進行附加樣式設定？

CustomCssUrl 適合於：

列印特定樣式：隱藏導航選單或互動元素
PDF 佈局優化：調整頁面邊距和分頁
條件格式：僅在生成 PDF 時應用樣式
A/B 測試：測試不同的 PDF 佈局而不修改來源 HTML

我如何處理 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")

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

我如何使用 Base64 在 HTML 中直接編碼影像？

可以將影像資產直接編碼到 HTML 檔案或字串中，避免遺失影像的問題。請使用 base64 編碼此方法。請使用 base64 編碼此方法。請使用 base64 編碼此方法：

首先通過讀取檔案獲取影像的二進位資料或通過網路請求接受該資料。
使用 Microsoft .NET 中的 Convert.ToBase64String 方法將二進位資料轉換為 base64。
在 HTML 中使用構建圖像標籤 "data:image/svg+xml;base64," 在 base64 資料前。請注意，影像型別是在 base64 資料前指定的。參閱 MDN Web Docs 上的影像型別和格式以獲取更多影像格式型別的資訊。

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

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

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

為什麼我會選擇 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'>";

' Example: Encoding different image formats
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 = If(extension, {
        ".png", "image/png",        ' Best for graphics with transparency
        ".jpg", "image/jpeg",       ' Best for photographs
        ".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}"
End Function

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

' Example: Encoding different image formats
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 = If(extension, {
        ".png", "image/png",        ' Best for graphics with transparency
        ".jpg", "image/jpeg",       ' Best for photographs
        ".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}"
End Function

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

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

' 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

為了獲得最佳結果：

使用 base64 用於小圖示和徽標（< 50KB）
對於大型影像和照片使用外部引用
在編碼前考慮壓縮
根據內容型別選擇適合的影像格式

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

常見問題

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

IronPDF允許您在HTML到PDF轉換過程中指定BaseUrlOrPath參數。這個參數可以是網路URL或本地文件路徑，作為在您的HTML中所有相對資源路徑的基準，確保CSS、JavaScript和圖片正確載入。

BaseUrlOrPath參數的用途是什麼？

IronPDF中的BaseUrlOrPath參數指定了在HTML到PDF轉換期間所有資源（CSS、JavaScript、圖片）載入的基準URL。它可以設置為以'http'開頭的網路URL以載入遠端資源，或本地文件路徑以載入基於磁碟的資源。

如何僅用一行程式碼渲染包含資產的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'開頭的網路URL。對於本地資源，使用磁碟上的文件路徑。這種靈活性允許您在PDF生成期間從各種來源引用資源。

如果我不設置BaseUrlOrPath參數，會發生什麼情況？

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

How does Base64 encoding affect the size of my PDFs?

Base64 encoding increases HTML and subsequently PDF size due to data being represented in a larger format. Use it for smaller images, while larger assets should use external references to optimize PDF size.

What are the benefits of using Base64 encoding in IronPDF?

Base64 encoding benefits include creating self-contained HTML, ensuring cross-platform compatibility, reducing security risks by eliminating file system access, and preventing missing asset errors in live environments.

How do I handle relative asset paths in HTML files for PDF conversion in IronPDF?

Ensure your file structure supports the relative paths in your HTML file, and use `RenderHtmlFileAsPdf` from IronPDF to convert HTML files to PDFs while correctly loading CSS and JavaScript resources.

Why don't headers and footers in IronPDF inherit Base URLs from the main document?

Headers and footers in IronPDF do not inherit Base URLs from the main document to maintain styling independence, ensure consistent rendering, and allow flexible asset organization for optimal PDF creation.