1. IronPDF
  2. 操作指南
  3. 基礎URL及資產編碼

如何使用基本 URL 和資產編碼

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

IronPDF 是一個在 .NET 專案中生成 PDF 文件的實用工具。

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

如何使用 HTML 與 CSS 及圖片

  1. 下載 IronPDF 以支援 HTML 和 CSS 轉換為影像
  2. 指定 基礎網址或路徑 在 HTML 中使用外部圖像的參數
  3. 配置正確的 源代碼 在MVC中顯示在網頁和輸出PDF中
  4. 指定 基礎網址 屬性用於處理自訂頁首和頁尾
  5. 檢查輸出 PDF


從 HTML 字串渲染 PDF，包含圖片和 CSS 資產

在將 HTML 字串轉換為 PDF 時，設定 BaseUrlOrPath 參數用於資產如 CSS、JavaScript 檔案和圖片是很重要的。 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")
VB   C#

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")
VB   C#
<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 時，它們被視為獨立的 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
}
VB   C#

具有 CSS、JS 和圖像資產的 HTML 檔案轉為 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")
VB   C#

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

為了方便起見，您可以使用ChromePdfRenderOptions 中的 CustomCssUrl 用於額外樣式表如果您希望指定一個額外的樣式表，且該樣式表僅用於 .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")
VB   C#

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

圖像資產編碼

圖像資產可以直接編碼到HTML文件或字符串中，這有助於避免找不到圖像等令人沮喪的問題。 為了做到這一點，我們可以利用 base64 的使用：

  1. 首先通過讀取圖像文件或通過網絡請求獲取圖像的二進位數據。

  2. 在 Microsoft .NET 中使用 Convert.ToBase64String 方法將二進位數據轉換為 base64。

  3. 在HTML中使用"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")
VB   C#