Cómo convertir páginas Razor a PDF en ASP.NET Core Web App

por Chaknith Bin

Una Razor Page es un archivo con extensión .cshtml que combina C# y HTML para generar contenidos web. En ASP.NET Core, las Razor Pages son una forma más sencilla de organizar el código de las aplicaciones web, lo que las convierte en una buena opción para páginas sencillas que son de solo lectura o que introducen datos sencillos.

Una ASP.NET Core Web App es una aplicación web creada con ASP.NET Core, un marco multiplataforma para desarrollar aplicaciones web modernas.

IronPDF simplifica el proceso de creación de archivos PDF desde Razor Pages dentro de un proyecto ASP.NET Core Web App. Esto hace que la generación de PDF sea fácil y directa en ASP.NET Core Web Apps.



Paquete de extensión IronPDF

El paquete IronPdf.Extensions.Razor es una extensión del paquete principal IronPdf. Los paquetes IronPdf.Extensions.Razor e IronPdf son necesarios para convertir las páginas Razor en documentos PDF en una aplicación web ASP.NET Core.

Install-Package IronPdf.Extensions.Razor
Biblioteca NuGet de C# para PDF

Instalar con NuGet

Install-Package IronPdf.Extensions.Razor

Convertir páginas Razor en PDF

Necesitará un proyecto ASP.NET Core Web App para convertir las páginas Razor en archivos PDF.

Crear una clase modelo

  • Crea una nueva carpeta en el proyecto y llámala "Modelos".
  • Añada una clase C# estándar a la carpeta y nómbrela "Persona". Esta clase servirá como modelo para los datos individuales. Utilice el siguiente fragmento de código:
:path=/static-assets/pdf/content-code-examples/how-to/cshtml-to-pdf-razor-model.cs
namespace RazorPageSample.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}
Namespace RazorPageSample.Models
	Public Class Person
		Public Property Id() As Integer
		Public Property Name() As String
		Public Property Title() As String
		Public Property Description() As String
	End Class
End Namespace
VB   C#

Añadir una página de Razors

Añada una Razor Page vacía a la carpeta "Pages" y nómbrela "persons.cshtml".

  • Modifique el archivo "Persons.cshtml" recién creado utilizando el ejemplo de código que se proporciona a continuación.

    El siguiente código sirve para mostrar la información en el navegador.

@page
@using RazorPageSample.Models;
@model RazorPageSample.Pages.PersonsModel
@{
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in ViewData ["personList"] as List<Person>)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<form method="post">
    <button type="submit">print</button>
</form>
@page
@using RazorPageSample.Models;
@model RazorPageSample.Pages.PersonsModel
@{
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in ViewData ["personList"] as List<Person>)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<form method="post">
    <button type="submit">print</button>
</form>
HTML

A continuación, el siguiente código instanciará primero la clase ChromePdfRenderer. Pasar this al método RenderRazorToPdf es suficiente para convertir esta Página Razor en un documento PDF.

El usuario tiene acceso completo a las funciones disponibles en RenderingOptions. Estas características incluyen la capacidad de aplicar números de página al PDF generado, establecer márgenes personalizados y añadir texto y encabezados y pies de página HTML.

  • Abra el desplegable del archivo "Persons.cshtml" para ver el archivo "Persons.cshtml.cs".
  • Modifique el archivo "Persons.cshtml.cs" con el siguiente código.

    Tenga en cuenta
    El documento PDF puede visualizarse en el navegador utilizando el siguiente código: Archivo(pdf.BinaryData, "application/pdf"). Sin embargo, descargar el PDF después de verlo en el navegador da como resultado un documento PDF dañado.

using IronPdf.Razor.Pages;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPageSample.Models;

namespace RazorPageSample.Pages
{
    public class PersonsModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public List<Person> persons { get; set; }

        public void OnGet()
        {
            persons = new List<Person>
            {
            new Person { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new Person { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new Person { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
            };

            ViewData ["personList"] = persons;
        }
        public IActionResult OnPostAsync()
        {
            persons = new List<Person>
            {
            new Person { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new Person { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new Person { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
            };

            ViewData ["personList"] = persons;

            ChromePdfRenderer renderer = new ChromePdfRenderer();

            //  Convertir una página Razor en un documento PDF
            PdfDocument pdf = renderer.RenderRazorToPdf(this);

            Response.Headers.Add("Content-Disposition", "inline");

            return File(pdf.BinaryData, "application/pdf", "razorPageToPdf.pdf");

            //  Ver PDF de salida en broswer
            return File(pdf.BinaryData, "application/pdf");
        }
    }
}
using IronPdf.Razor.Pages;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPageSample.Models;

namespace RazorPageSample.Pages
{
    public class PersonsModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public List<Person> persons { get; set; }

        public void OnGet()
        {
            persons = new List<Person>
            {
            new Person { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new Person { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new Person { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
            };

            ViewData ["personList"] = persons;
        }
        public IActionResult OnPostAsync()
        {
            persons = new List<Person>
            {
            new Person { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new Person { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new Person { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
            };

            ViewData ["personList"] = persons;

            ChromePdfRenderer renderer = new ChromePdfRenderer();

            //  Convertir una página Razor en un documento PDF
            PdfDocument pdf = renderer.RenderRazorToPdf(this);

            Response.Headers.Add("Content-Disposition", "inline");

            return File(pdf.BinaryData, "application/pdf", "razorPageToPdf.pdf");

            //  Ver PDF de salida en broswer
            return File(pdf.BinaryData, "application/pdf");
        }
    }
}
Imports IronPdf.Razor.Pages
Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports RazorPageSample.Models

Namespace RazorPageSample.Pages
	Public Class PersonsModel
		Inherits PageModel

		<BindProperty(SupportsGet := True)>
		Public Property persons() As List(Of Person)

		Public Sub OnGet()
			persons = New List(Of Person) From {
				New Person With {
					.Name = "Alice",
					.Title = "Mrs.",
					.Description = "Software Engineer"
				},
				New Person With {
					.Name = "Bob",
					.Title = "Mr.",
					.Description = "Software Engineer"
				},
				New Person With {
					.Name = "Charlie",
					.Title = "Mr.",
					.Description = "Software Engineer"
				}
			}

			ViewData ("personList") = persons
		End Sub
		Public Function OnPostAsync() As IActionResult
			persons = New List(Of Person) From {
				New Person With {
					.Name = "Alice",
					.Title = "Mrs.",
					.Description = "Software Engineer"
				},
				New Person With {
					.Name = "Bob",
					.Title = "Mr.",
					.Description = "Software Engineer"
				},
				New Person With {
					.Name = "Charlie",
					.Title = "Mr.",
					.Description = "Software Engineer"
				}
			}

			ViewData ("personList") = persons

			Dim renderer As New ChromePdfRenderer()

			'  Convertir una página Razor en un documento PDF
			Dim pdf As PdfDocument = renderer.RenderRazorToPdf(Me)

			Response.Headers.Add("Content-Disposition", "inline")

			Return File(pdf.BinaryData, "application/pdf", "razorPageToPdf.pdf")

			'  Ver PDF de salida en broswer
			Return File(pdf.BinaryData, "application/pdf")
		End Function
	End Class
End Namespace
VB   C#

El método RenderRazorToPdf devuelve un objeto PdfDocument que puede someterse a procesamiento y edición adicionales. Puede exportar el PDF como PDFA o PDFUA, aplique una firma digital al documento PDF renderizado, o fusionar y dividir Documentos PDF. El método también permite rotar páginas, añadir anotaciones o favoritosy estampar marcas de agua personalizadas en tu PDF.

Añadir una sección a la barra de navegación superior

  • Vaya a la carpeta Páginas -> Carpeta compartida -> _Layout.cshtml. Coloque el elemento de navegación "Persona" después de "Inicio".

    Asegúrese de que el valor del atributo asp-page coincide exactamente con nuestro nombre de archivo, que en este caso es "Persons".

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPageSample</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Persons">Person</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPageSample</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Persons">Person</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
HTML

Ejecutar el proyecto

Esto le mostrará cómo ejecutar el proyecto y generar un documento PDF.

Ejecutar el proyecto ASP.NET Core Web App

Descargar el proyecto de aplicación web ASP.NET Core

Puede descargar el código completo de esta guía. Viene como un archivo comprimido que puede abrir en Visual Studio como un proyecto ASP.NET Core Web App.

Haga clic aquí para descargar el proyecto.

Chaknith Bin

Ingeniero de software

Chaknith es el Sherlock Holmes de los desarrolladores. La primera vez que se le ocurrió que podría tener futuro en la ingeniería de software fue cuando hacía retos de código por diversión. Su trabajo se centra en IronXL e IronBarcode, pero se enorgullece de ayudar a los clientes con todos los productos. Chaknith aprovecha sus conocimientos, adquiridos hablando directamente con los clientes, para ayudar a mejorar los propios productos. Sus comentarios anecdóticos van más allá de los tickets de Jira y apoyan el desarrollo de productos, la documentación y el marketing, para mejorar la experiencia general del cliente.Cuando no está en la oficina, se le puede encontrar aprendiendo sobre aprendizaje automático, codificación y senderismo.