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

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

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 IronPDF para la conversión de HTML a CSS e imágenes
  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


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;

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

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

Antes de proceder

Formatos de rutas 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 BaseURL 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;

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

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;

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

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 utilizarCustomCssUrl en ChromePdfRenderOptions para hojas de estilo adicionales 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;

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

Atención
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 elDocumentos web de MDN sobre tipos y formatos de imagen 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();

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