1. IronPDF
  2. 操作指南
  3. 基礎 URL 和資產編碼
如何使用 C# 在 PDF 生成中使用基底 URL

How to Use Base URLs & Asset Encoding

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

IronPDF 是一個生成 PDF 文件的有用工具，適用於 .NET 項目。

該庫的一個常見用法是“HTML 到 PDF”渲染 - 使用 HTML 作為渲染 PDF 文檔的設計語言。 一個合乎邏輯的問題是：我們如何在 HTML 到 PDF 轉換中使用 CSS 樣式表和圖像文件？

快速入門：在 IronPDF 中實施基本網址

通過在 .NET C# 中輕鬆實現基本網址，開始使用 IronPDF，在 HTML 到 PDF 轉換過程中實現無縫的資產加載。 此範例演示如何設置 BaseUrlOrPath 以確保所有 CSS、JavaScript 和圖像被正確引用，簡化生成穩定 PDF 文件的過程。 非常適合渴望以最少設置提升其 PDF 呈現效果的開發者。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

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

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

簡約工作流程（5 步驟）

  1. 下載 IronPDF 以支援 HTML 到 CSS 到圖像
  2. 指定 BaseUrlOrPath 參數以便在 HTML 中使用外部圖像
  3. 在 MVC 中配置正確的 src 以便在網頁和輸出 PDF 中顯示
  4. 指定 BaseUrl 屬性以配合自定義頁眉和頁腳
  5. 檢查輸出 PDF


從 HTML 字串渲染包含圖像和 CSS 資產的 PDF

在處理 HTML 字串到 PDF 轉換時，為 CSS、JavaScript 文件和圖像等資產設置 BaseUrlOrPath 參數非常重要。 BaseUrlOrPath 指定了所有資產將相對加載的基本 URL。

這可以是以 'http' 開頭的網絡 URL 以加載遠程資產，也可以是本地文件路徑以訪問磁盤上的資產。 正確設置 BaseUrlOrPath 確保資產在轉換過程中正確加載。

: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

MVC 應用程式

在 MVC 應用程式中，指定圖像的文件路徑可能具有挑戰性。 為確保 IronPDF 可以找到圖像且在網站上正確顯示，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

警告

不工作的文件路徑格式

以下格式在 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

帶圖像和資產的 HTML 頁眉和頁腳

當我們將 HTML 頁眉和頁腳呈現到新 PDF 或現有 PDF 時，它們被視為獨立的 HTML 文檔，不繼承 PDF 自身的 BaseURL。

我們應設置一個 BaseURL，以便可以加載資產：

: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

將 HTML 文件轉換為具有 CSS、JS 和圖像資產的 PDF

在將 HTML 文件呈現為 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

在上面的例子中，所有 JS、CSS 和圖像文件將從磁碟上的 C:\Assets 文件夾加載 - 與 HTML 文件所在目錄相同。

為了方便起見，您可以使用 ChromePdfRenderOptions 中的 CustomCssUrl 用於附加樣式表 為 .NET PDF 渲染指定一個僅用於 .NET PDF 渲染的附加樣式表，例如：

: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

請注意ChromePdfRenderOptions.CustomCssUrl 屬性目前僅在使用 RenderHtmlAsPdf 方法從 HTML 字串呈現為 PDF 文檔時有效。

圖像資產編碼

圖像資產可以直接編碼到 HTML 文件或字串中，這可以幫助避免一些找不到圖像的令人沮喪的問題。 為此，我們可以利用 base64：

  1. 首先通過讀取圖像文件或通過網絡請求獲取圖像的二進製數據。
  2. 使用 Microsoft .NET 中的 Convert.ToBase64String 方法將二進製數據轉換為 base64。
  3. 在 base64 數據前構造 HTML 中的圖像標籤，使用 "data:image/svg+xml;base64,"。 您可能已注意到在base64數據之前指定了影像類型。 訪問 MDN Web 圖像類型和格式的文檔 以獲取有關圖像格式類型的更多信息。
: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

常見問題解答

在HTML到PDF轉換中使用基礎URL的重要性是什麼？

基礎URL在HTML到PDF轉換中至關重要，因為它們確保所有相關資產，如CSS樣式表、JavaScript文件和圖像能正確加載。在IronPDF中，BaseUrlOrPath參數可以設置為一個網路URL或本地文件路徑以促進此過程。

如何在MVC應用程式中處理資產加載以生成PDF？

在使用IronPDF的MVC應用程式中，您可以通過配置BaseUrlOrPath參數指向包含資產的目錄來處理資產加載。這樣，您的HTML將正確引用相對於此基礎路徑的CSS和圖片路徑。

什麼是資產編碼，為什麼在PDF生成中使用它？

資產編碼涉及將圖像數據轉換為base64字符串並嵌入在HTML中。這種技術結合IronPDF使用，確保在PDF渲染過程中圖像不會丟失，特別是在資產不能直接從URL或文件路徑訪問時。

如何在.NET中在PDF渲染過程中包括附加的樣式表？

您可以在PDF渲染過程中使用IronPDF的ChromePdfRenderOptions來包括附加的樣式表。通過設置CustomCssUrl屬性，您可以指定渲染過程中使用的外部樣式表。

缺少PDF中的圖片時，一些常見的故障排除步驟是什麼？

缺少PDF中的圖片的常見故障排除步驟包括驗證BaseUrlOrPath和src屬性在您的HTML中的正確性。當使用IronPDF時，確保這些路徑的準確性將解決大多數與缺失圖片相關的問題。

如何在PDF中使用圖像來渲染HTML標題和頁腳？

通過為每個設置一個單獨的BaseURL，可以在PDF中使用圖像來渲染HTML標題和頁腳。使用IronPDF時，標題和頁腳被視為獨立的HTML文檔，因此正確設置其基礎路徑以加載資產非常重要。

可以轉換本地HTML文件及其資產為PDF嗎？

是的，您可以使用IronPDF將本地HTML文件及其資產轉換為PDF。通過確保BaseUrlOrPath設置為HTML文件的目錄，IronPDF將正確加載所有相關的CSS和圖片資產。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 16,154,058 | 版本： 2025.11 剛剛發布