Como Converter PDF a partir de Razor no Blazor Server com C

Qual estrutura de classe de modelo devo usar?

Adicione uma classe C# padrão chamada PersonInfo . Esta classe serve como modelo para armazenar informações de pessoas. Insira o seguinte código:

:path=/static-assets/pdf/content-code-examples/how-to/razor-to-pdf-blazor-server-model.cs

namespace BlazorSample.Data
{
    public class PersonInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

Namespace BlazorSample.Data
	Public Class PersonInfo
		Public Property Id() As Integer
		Public Property Name() As String
		Public Property Title() As String
		Public Property Description() As String
	End Class
End Namespace

Este modelo representa a estrutura de dados passada para o seu componente Razor e renderizada no PDF. O IronPDF funciona com qualquer modelo de objeto C#, desde POCOs simples até modelos complexos do Entity Framework. Ao projetar modelos para geração de PDFs, considere como os dados serão exibidos no documento final e estruture as propriedades de acordo.

Como faço para implementar o componente Razor para geração de PDF?

Use o método RenderRazorComponentToPdf para converter componentes Razor em PDFs. Acesse este método instanciando a classe ChromePdfRenderer . O método retorna um objeto PdfDocument para exportação ou posterior modificação.

O documento PdfDocument retornado suporta modificações adicionais, incluindo a conversão para os formatos PDF/A ou PDF/UA . Você pode mesclar ou dividir o documento, girar as páginas e adicionar anotações ou marcadores . Aplique marcas d'água personalizadas conforme necessário.

Adicione um componente Razor chamado Person.razor . Insira o seguinte código:

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;

<h3>Person</h3>

@code {
    // A parameter to receive a list of persons from the parent component.
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }

    // Dictionary to hold parameters that will be passed to the PDF renderer.
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        // Initialize the persons list with some sample data.
        persons = new List<PersonInfo>
        {
            new PersonInfo { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new PersonInfo { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new PersonInfo { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
        };
    }

    private async void PrintToPdf()
    {
        ChromePdfRenderer renderer = new ChromePdfRenderer();

        // Apply text footer to the PDF pages.
        renderer.RenderingOptions.TextFooter = new TextHeaderFooter()
        {
            LeftText = "{date} - {time}",
            DrawDividerLine = true,
            RightText = "Page {page} of {total-pages}",
            Font = IronSoftware.Drawing.FontTypes.Arial,
            FontSize = 11
        };

        Parameters.Add("persons", persons);

        // Render Razor component to PDF and save it.
        PdfDocument pdf = renderer.RenderRazorComponentToPdf<Person>(Parameters);
        File.WriteAllBytes("razorComponentToPdf.pdf", pdf.BinaryData);
    }
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in persons)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<button class="btn btn-primary" @onclick="PrintToPdf">Print to Pdf</button>

Este método fornece acesso a todos os recursos do RenderingOptions . Adicione cabeçalhos e rodapés de texto e HTML , inclua números de página e ajuste as dimensões e o layout da página. RenderingOptions suporta margens personalizadas , configurações de viewport para designs responsivos e atrasos na execução de JavaScript para conteúdo dinâmico.

Para layouts complexos ou frameworks CSS como o Bootstrap, explore os recursos de renderização CSS responsiva para garantir que os PDFs sejam exibidos corretamente em diferentes tamanhos de página.

Como adiciono navegação ao meu componente Razor ?

• Navegue até a "Pasta compartilhada" e abra NavMenu.razor. Adicione a seção que abrirá nosso componente Razor , Person. Nosso componente Person será a segunda opção.

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Person">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Person
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

Essa configuração de navegação se integra ao sistema de roteamento do Blazor, permitindo que os usuários acessem a funcionalidade de geração de PDF a partir do menu de navegação principal do seu aplicativo. O componente NavLink garante o destaque adequado da rota ativa.

Como é o processo de geração de PDFs?

Execute o projeto e gere um documento PDF. Clique no botão "Imprimir para PDF". O IronPDF processa seu componente Razor , converte-o em HTML e o renderiza como um PDF usando seu mecanismo de renderização baseado no Chrome. Isso mantém a mesma fidelidade visual dos navegadores modernos.

O PDF gerado será salvo no diretório de saída do seu projeto. Personalize o local de salvamento, implemente downloads diretos pelo navegador ou armazene PDFs em armazenamento em nuvem, como o Azure Blob Storage. Para aplicações de produção, implemente tratamento de erros e feedback do usuário para cenários em que a geração de PDF possa falhar ou exceder a duração esperada.