1. IronPDF
  2. Cómo Hacer
  3. URL base y codificación de activos

Cómo utilizar las URL base y la codificación de activos

IronPDF es una herramienta útil para generar documentos PDF en proyectos .NET.

Un uso habitual de esta biblioteca es la conversión de "HTML a PDF", en la que se utiliza HTML como lenguaje de diseño para convertir un documento PDF. Una pregunta lógica es: ¿Cómo podemos utilizar hojas de estilo CSS y archivos de imagen en nuestra conversión de HTML a PDF?

Cómo utilizar HTML con CSS e imágenes

  1. Descargar biblioteca C# para utilizar HTML con CSS e imagen
  2. Especifique BaseUrlOrPath para utilizar imágenes externas en HTML
  3. Configure correctamente src en MVC para mostrar tanto en la web y PDF de salida
  4. Especifique BaseUrl propiedad para trabajar con encabezado y pie de página personalizados
  5. Compruebe el PDF de salida


Biblioteca NuGet C# para PDF

Instalar con NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
o
Java PDF JAR

Descargar DLL

Descargar DLL

Instalar manualmente en su proyecto

Renderización de un PDF a partir de una cadena HTML con activos de imagen y CSS

Al trabajar con la conversión de cadenas HTML a PDF, es importante establecer un parámetro BaseUrlOrPath para activos como CSS, archivos JavaScript e imágenes. BaseUrlOrPath especifica la URL base desde la que se cargarán todos los activos relativos.

Puede ser una URL web que empiece por 'http' para cargar activos remotos o una ruta de archivo local para acceder a activos en su disco. Establecer correctamente la BaseUrlOrPath garantiza que los activos se carguen correctamente durante el proceso de conversión.

:path=/static-assets/pdf/content-code-examples/how-to/base-urls-baseurl.cs
using IronPdf;

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

string baseUrl = @"C:\site\assets\";
string html = "<img src='icons/iron.png'>";

//  Convertir HTML en PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html, baseUrl);

//  Exportar PDF
pdf.SaveAs("html-with-assets.pdf");
Imports IronPdf

'  Instanciar ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

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

'  Convertir HTML en PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

'  Exportar PDF
pdf.SaveAs("html-with-assets.pdf")
VB   C#

Aplicación MVC

En una aplicación MVC, especificar la ruta de archivo de una imagen puede resultar complicado. Para garantizar que IronPDF pueda encontrar la imagen y mostrarla correctamente en el sitio web, es necesario configurar correctamente el atributo baseUrl de IronPDF y src="" en la cadena HTML.

Con la jerarquía de archivos que se muestra a continuación

  • baseUrlOrPath a @"wwwroot/image"
  • atributo src a "../image/Sample.jpg"
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

**Por ejemplo

:path=/static-assets/pdf/content-code-examples/how-to/base-mvc.cs
//  Instanciar ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

//  Convertir HTML en PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");
'  Instanciar ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

'  Convertir HTML en 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

Antes de seguir

Formatos de ruta de archivos que no funcionan

Los siguientes formatos funcionan bien cuando se visualizan en el navegador Chrome, pero apuntan al directorio de carpetas incorrecto cuando se utilizan en una aplicación MVC. Estos formatos siguen funcionando con IronPDF si se proporciona baseUrlOrPath en el método RenderHtmlAsPdf:

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

Por otro lado, estos formatos funcionan bien con la aplicación MVC, pero cuando se trata de la ruta del archivo, estos formatos no funcionan bien en IronPDF:

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

Encabezados y pies de página HTML con imágenes y recursos

Cuando renderizamos encabezados y pies de página HTML en un PDF nuevo o existente, se tratan como documentos HTML independientes y no heredan la URL base del propio PDF.

Debemos establecer una BaseURL desde la que se puedan cargar los activos:

:path=/static-assets/pdf/content-code-examples/how-to/base-header-footer.cs
using IronPdf;
using System;

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

//  Añadir cabecera
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    MaxHeight = 20,
    HtmlFragment = "<img src='logo.png'>",
    BaseUrl = new Uri(@"C:\assets\images\").AbsoluteUri
};
Imports IronPdf
Imports System

'  Instanciar ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

'  Añadir cabecera
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
	.MaxHeight = 20,
	.HtmlFragment = "<img src='logo.png'>",
	.BaseUrl = (New Uri("C:\assets\images\")).AbsoluteUri
}
VB   C#

Archivo HTML a PDF con CSS, JS y Activos de Imagen

Al convertir un archivo HTML a PDF, todos los activos se considerarán locales a ese archivo.

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file.cs
using IronPdf;

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

//  Convertir un archivo HTML en PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("C:\\Assets\\TestInvoice1.html");

//  Exportar PDF
pdf.SaveAs("Invoice.pdf");
Imports IronPdf

'  Instanciar ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

'  Convertir un archivo HTML en PDF
Private pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Assets\TestInvoice1.html")

'  Exportar PDF
pdf.SaveAs("Invoice.pdf")
VB   C#

En el ejemplo anterior, todos los archivos JS, CSS y de imagen se cargarán desde la carpeta C:\Assets del disco - el mismo directorio en el que se encuentra el archivo HTML.

Para mayor comodidad, puede utilizar ChromePdfRenderOptions.CustomCssUrl para especificar una hoja de estilos adicional que sólo se utilice para la representación de PDF en .NET, si así lo desea. Por ejemplo

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.cs
using IronPdf;

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

//  Establecer url CSS adicional
renderer.RenderingOptions.CustomCssUrl = "./style.css";

//  Convertir un archivo HTML en PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

//  Exportar PDF
pdf.SaveAs("tryCss.pdf");
Imports IronPdf

'  Instanciar ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

'  Establecer url CSS adicional
renderer.RenderingOptions.CustomCssUrl = "./style.css"

'  Convertir un archivo HTML en PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

'  Exportar PDF
pdf.SaveAs("tryCss.pdf")
VB   C#

Tenga en cuenta
Actualmente, la propiedad ChromePdfRenderOptions.CustomCssUrl sólo funciona al renderizar desde una cadena HTML a un documento PDF mediante el método RenderHtmlAsPdf.

Codificación de activos de imagen

Los activos de imagen pueden codificarse directamente en el archivo o cadena HTML, lo que puede ayudar a evitar algunos de los frustrantes problemas de las imágenes que no se encuentran. Para ello podemos recurrir al uso de base64:

  1. En primer lugar, se obtienen los datos binarios de la imagen, ya sea leyendo el archivo de imagen o recibiéndolo a través de una petición de red.
  2. Utilice el método Convert.ToBase64String de Microsoft .NET para convertir los datos binarios a base64.
  3. Construya la etiqueta de imagen en HTML utilizando "data:image/svg+xml;base64," antes de los datos base64. Habrá notado que el tipo de imagen se especifica antes que los datos base64. Visite el Documentos web MDN para obtener más información sobre los tipos de formato de imagen.
: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();

//  Importar datos binarios de archivos de imagen
byte[] binaryData = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg");

//  Convertir los datos binarios a base 64
string imgDataUri = Convert.ToBase64String(binaryData);

//  Incrustar en HTML
string html = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>";

//  Convertir HTML a PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

//  Exportar el PDF
pdf.SaveAs("embedImageBase64.pdf");
Imports IronPdf
Imports System
Imports System.IO

Private renderer As New ChromePdfRenderer()

'  Importar datos binarios de archivos de imagen
Private binaryData() As Byte = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg")

'  Convertir los datos binarios a base 64
Private imgDataUri As String = Convert.ToBase64String(binaryData)

'  Incrustar en HTML
Private html As String = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>"

'  Convertir HTML a PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

'  Exportar el PDF
pdf.SaveAs("embedImageBase64.pdf")
VB   C#