如何使用基础 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 样式表和图像文件


适用于PDF的C# NuGet库

安装使用 NuGet

Install-Package IronPdf
Java PDF JAR

下载 DLL

下载DLL

手动安装到你的项目中

适用于PDF的C# NuGet库

安装使用 NuGet

Install-Package IronPdf
Java PDF JAR

下载 DLL

下载DLL

手动安装到你的项目中

开始在您的项目中使用IronPDF,并立即获取免费试用。

第一步:
green arrow pointer

查看 IronPDFNuget 用于快速安装和部署。它有超过800万次下载,正在使用C#改变PDF。

适用于PDF的C# NuGet库 nuget.org/packages/IronPdf/
Install-Package IronPdf

考虑安装 IronPDF DLL 直接。下载并手动安装到您的项目或GAC表单中: IronPdf.zip

手动安装到你的项目中

下载DLL

使用图像和 CSS 资产从 HTML 字符串渲染 PDF 文件

将 HTML 字符串转换为 PDF 时,为 CSS、JavaScript 文件和图像等资产设置BaseUrlOrPath参数非常重要。BaseUrlOrPath 指定了基础 URL,所有资产都将从该 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.在 base64 数据之前使用 "data:image/svg+xml;base64 "来构建 HTML 中的图像标记。您可能已经注意到,图像类型是在 base64 数据之前指定的。请访问 MDN 网络文档 了解更多图像格式类型的信息。

: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#