Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF
  2. Blog do IronPDF
  3. Usando o IronPDF
  4. Visualizador de PDF Blazor
USANDO O IRONPDF

Como Construir um Visualizador de PDF Blazor com IronPDF

Curtis Chau
Curtis Chau
Atualizado:

Um visualizador de PDF em Blazor renderiza documentos PDF embutidos, convertendo-os em um URI de dados base64 e carregando o resultado em um elemento <iframe>. O ChromePdfRenderer do IronPDF converte strings HTML, URLs em tempo real ou conteúdo dinâmico em bytes PDF em uma única chamada assíncrona, oferecendo aos aplicativos Blazor Server e Blazor WebAssembly capacidade completa de geração e exibição de PDFs sem a necessidade de plugins de visualização externos.

Aplicativos empresariais frequentemente precisam exibir faturas, contratos e relatórios sem redirecionar os usuários para uma aba separada ou depender do suporte a PDF do navegador, que varia de dispositivo para dispositivo. O modelo de componentes do Blazor facilita a geração de um PDF no servidor, sua codificação e transmissão para qualquer componente da página, desde que a biblioteca lide com a conversão de forma confiável.

Este guia aborda a instalação, a renderização baseada em URL e HTML, a personalização com cabeçalhos e rodapés, os downloads via navegador usando interoperabilidade com JavaScript , uma comparação das abordagens Blazor Server e Blazor WebAssembly e quatro operações avançadas: mesclagem, anotações, proteção por senha e exibição de arquivos enviados pelo usuário. Componentes Razor e exemplos equivalentes em C# de nível superior são fornecidos para cada técnica.

Inicie um teste gratuito do IronPDF para acompanhar os exemplos deste guia.

Como começar a usar o IronPDF em um projeto Blazor ?

Para começar, é necessário instalar o pacote NuGet e adicionar uma chave de licença a Program.cs. Instale o IronPDF a partir do Gerenciador de Pacotes:

Install-Package IronPdf

Como alternativa, pesquise por "IronPDF" na interface do gerenciador de pacotes NuGet e selecione a versão mais recente.

NuGet Instalar com NuGet

PM >  Install-Package IronPdf

Confira o IronPDF no NuGet para uma instalação rápida. Com mais de 10 milhões de downloads, ele está transformando o desenvolvimento de PDFs com C#. Você também pode baixar o arquivo DLL ou o instalador para Windows .

Após a instalação, adicione sua chave de licença em Program.cs antes de qualquer operação com PDF:

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"
$vbLabelText   $csharpLabel

O IronPDF é compatível com .NET 10, .NET 9, .NET 8, .NET 6 e .NET Framework 4.6.2 e versões posteriores. Para fins de desenvolvimento e teste, a biblioteca funciona sem uma chave de licença, mas adiciona uma marca d'água aos PDFs gerados. Uma licença de avaliação gratuita remove a marca d'água durante o período de teste.

O IronPDF é compatível com projetos Blazor Server e Blazor WebAssembly. No Blazor Server, o mecanismo de renderização é executado diretamente no servidor. Em Blazor WebAssembly, a geração de PDFs requer um endpoint de API do lado do servidor; A seção sobre arquitetura, apresentada mais adiante neste guia, explica ambas as abordagens.

Como posso exibir um arquivo PDF a partir de uma URL no Blazor?

A maneira mais direta de criar um visualizador de PDF Blazor é converter um URL em um PDF e exibi-lo em um <iframe>. O ChromePdfRenderer do IronPDF busca a página da web e a converte para o formato PDF usando o mesmo mecanismo de renderização do Chrome que alimenta o Google Chrome, preservando fielmente o CSS, a saída JavaScript e o layout.

Abordagem de Componentes de Razor

O componente Razor a seguir converte uma URL em um PDF e o exibe embutido. O método GeneratePdf é executado no servidor em um aplicativo Blazor Server, portanto, todo o mecanismo de renderização do Chrome está disponível:

@page "/pdfviewer"
@using IronPdf

<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

Exemplo de C# de alto nível

Para serviços em segundo plano, aplicativos de console ou endpoints de API do lado do servidor, a mesma conversão usa chamadas de API idênticas fora de qualquer contexto de componente:

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
' Fetch and convert the target URL to a PDF document
Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://ironpdf.com")

' Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf")
Dim pdfBytes As Byte() = pdf.BinaryData
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync busca a página, executa todo o JavaScript, aplica o CSS e retorna um objeto PdfDocument contendo a saída renderizada. A propriedade BinaryData expõe os bytes brutos do PDF para armazenamento, transmissão ou exibição. O <iframe> exibe a saída com uma barra de ferramentas de navegador integrada para zoom, navegação e impressão.

Como criar um visualizador de PDF em Blazor usando o IronPDF: Figura 1 - URL para saída do visualizador de PDF

Como faço para personalizar a geração de PDFs?

O IronPDF fornece controle de saída através da classe ChromePdfRenderOptions. Você pode definir o tamanho do papel, ajustar as margens e adicionar cabeçalhos e rodapés de texto ou HTML a cada página. O guia de opções de renderização abrange a lista completa de propriedades disponíveis.

Abordagem de Componentes de Razor

O componente a seguir configura o papel A4 com margens e adiciona texto de cabeçalho e rodapé a cada página. Atribua RenderingOptions antes de chamar qualquer método de renderização para aplicá-los globalmente à instância do renderizador:

@page "/pdfcustom"
@using IronPdf

<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Exemplo de C# de alto nível

As mesmas opções se aplicam em qualquer contexto .NET . Esse padrão funciona bem dentro de uma API minimalista do ASP.NET Core ou de um gerador de relatórios agendados:

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer With {
    .RenderingOptions = New ChromePdfRenderOptions With {
        .PaperSize = PdfPaperSize.A4,
        .MarginTop = 25,
        .MarginBottom = 25,
        .TextHeader = New TextHeaderFooter With {.CenterText = "Report - {date}", .FontSize = 12},
        .TextFooter = New TextHeaderFooter With {.RightText = "Page {page} of {total-pages}", .FontSize = 10}
    }
}

Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://example.com/report")
pdf.SaveAs("customized-report.pdf")
$vbLabelText   $csharpLabel

As variáveis ​​de modelo, incluindo {page}, {total-pages} e {date}, são substituídas por valores reais no momento da renderização. Para layouts de marca complexos, use as propriedades HtmlHeader e HtmlFooter em vez de TextHeader e TextFooter. O guia de cabeçalhos e rodapés contém exemplos completos para ambas as abordagens.

Como criar um visualizador de PDF Blazor usando o IronPDF: Figura 2 - PDF personalizado aberto no visualizador de PDF

Qual a melhor maneira de habilitar o download de PDFs?

A exibição de PDFs em um <iframe> lida com a visualização, mas os usuários frequentemente precisam baixar o arquivo. A interoperabilidade com JavaScript aciona um download do navegador a partir de um fluxo de bytes .NET . Para obter mais informações sobre como baixar e exportar padrões, consulte o guia de exportação e salvamento em PDF .

Abordagem de Componentes de Razor

Injete IJSRuntime no componente e chame uma função auxiliar em JavaScript para iniciar o download. O DotNetStreamReference transmite os bytes do PDF sem carregar o arquivo inteiro na memória JavaScript de uma só vez:

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime

<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>

@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

Adicione esta função JavaScript ao seu arquivo _Host.cshtml ou App.razor, conforme descrito na documentação de interoperabilidade JavaScript do Blazor da Microsoft :

window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
JAVASCRIPT

Exemplo de C# de alto nível

Em um endpoint de API do lado do servidor, retorne os bytes do PDF diretamente usando Results.File. O navegador recebe o arquivo com os cabeçalhos Content-Disposition corretos e inicia o download automaticamente:

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
Imports IronPdf

' ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", Async Function()
    Dim renderer As New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>")
    ' Return with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf")
End Function)
$vbLabelText   $csharpLabel

Como posso gerar PDFs a partir de componentes Razor ?

A geração de PDFs a partir de HTML oferece controle total sobre o layout, a vinculação de dados e o estilo. Essa abordagem é adequada para faturas, relatórios e qualquer documento criado a partir de dados de aplicativos em tempo real. Para técnicas de renderização mais avançadas, consulte o guia de conversão de HTML para PDF .

Abordagem de Componentes de Razor

O componente abaixo cria uma string HTML de fatura a partir de dados C# e a converte em PDF. O ChromePdfRenderer trata a string HTML da mesma forma que uma página da web, aplicando todo o CSS e renderizando-a com o mecanismo do Chrome:

@page "/invoicedemo"
@using IronPdf

<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2025-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td><td>1</td><td>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Exemplo de C# de alto nível

A mesma abordagem de string HTML funciona em qualquer contexto .NET , incluindo aplicativos de console, serviços em segundo plano e endpoints de API . A interpolação de strings em C# ou uma biblioteca de templates insere dados dinâmicos antes de passar a string para o renderizador:

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
Imports IronPdf

Dim html As String = "
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    "

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync(html)
pdf.SaveAs("invoice.pdf")
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync aceita qualquer string HTML válida, incluindo CSS embutido e JavaScript incorporado. A implementação lida automaticamente com o layout, a renderização de fontes e as quebras de página.

Como criar um visualizador de PDF em Blazor usando o IronPDF: Figura 3 - PDF da fatura no visualizador

Qual a diferença entre um visualizador de PDF para Blazor Server e um visualizador para Blazor WebAssembly?

O modelo de hospedagem determina onde a geração de PDFs é executada e como os bytes chegam ao navegador. Compreender essa distinção evita um erro arquitetônico comum ao criar visualizadores de PDF em Blazor .

O Blazor Server executa todo o código C# no servidor. ChromePdfRenderer é executado no lado do servidor e os bytes resultantes são enviados para o navegador através da conexão SignalR existente. Este é o caminho de integração mais simples, não exigindo endpoints de API adicionais nem chamadas de rede além do que foi mostrado nas seções anteriores.

O Blazor WebAssembly executa C# no ambiente isolado do navegador usando WASM. O mecanismo de renderização do IronPDF depende de binários nativos que não podem ser executados dentro do sandbox do navegador, portanto, ChromePdfRenderer não está disponível diretamente em um projeto WASM. A abordagem correta é chamar um endpoint de API do lado do servidor que execute a geração do PDF e retorne os bytes como resposta.

Configurando uma API de geração de PDF para Blazor WebAssembly

No servidor, defina um endpoint de API mínimo que gere e retorne o PDF:

// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
Imports IronPdf

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"

app.MapGet("/api/pdf/report", Async Function()
    Dim renderer = New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>")
    ' Return PDF bytes with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "report.pdf")
End Function)
$vbLabelText   $csharpLabel

No cliente WASM, injete HttpClient e chame o endpoint da API. O modelo de projeto hospedado Blazor WASM pré-configura HttpClient para direcionar o endereço base do servidor:

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Esse padrão mantém todo o trabalho pesado de renderização no servidor, enquanto o cliente WASM lida apenas com a exibição. Para uso em produção, adicione autenticação ao endpoint da API e restrinja o conteúdo do PDF gerado aos dados do usuário autenticado.

Que outras operações em PDF posso realizar?

A API do IronPDF vai muito além da simples visualização. As seções a seguir abordam quatro operações comumente necessárias em fluxos de trabalho de documentos Blazor : mesclar vários documentos, adicionar anotações, aplicar proteção por senha e exibir arquivos enviados pelo usuário.

Como faço para mesclar vários documentos PDF?

A função "Mesclar" combina várias instâncias de PdfDocument em um único arquivo, sendo útil para montar seções de relatórios, adicionar apêndices ou concatenar arquivos selecionados pelo usuário. O guia de mesclagem e divisão de PDFs aborda operações de inserção e divisão em nível de página.

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()

' Generate two separate sections as individual PDF documents
Dim section1 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>")
Dim section2 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>")

' Merge into a single document preserving all pages
Dim merged = PdfDocument.Merge(section1, section2)
merged.SaveAs("combined-report.pdf")
$vbLabelText   $csharpLabel

Para exibir o documento mesclado em um componente Blazor , passe merged.BinaryData para o padrão URI de dados base64 das seções anteriores. O objeto mesclado PdfDocument também aceita operações adicionais (marca d'água, configurações de segurança ou acréscimos de página) antes de ser codificado para exibição.

Como adiciono anotações a um PDF?

As anotações anexam notas e comentários do revisor a locais específicos da página sem alterar o conteúdo original do documento. O IronPDF suporta anotações de texto, caixas de texto livre e outros tipos de marcação. Consulte o guia de anotações para obter a lista completa de propriedades de anotação.

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
Imports IronPdf
Imports IronPdf.Annotations

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>")

' Add a text annotation to page 0 at position (50, 650)
Dim annotation As New TextAnnotation(pageIndex:=0) With {
    .Title = "Reviewer Note",
    .Contents = "Please confirm clause 3 before signing.",
    .X = 50,
    .Y = 650,
    .Width = 200,
    .Height = 50,
    .Printable = False,
    .OpenByDefault = True
}

pdf.Annotations.Add(annotation)
pdf.SaveAs("annotated-contract.pdf")
$vbLabelText   $csharpLabel

As anotações são preservadas quando o PDF é aberto em qualquer visualizador padrão, incluindo a tela do navegador. Para aplicações Blazor , execute a lógica de anotação no servidor e retorne pdf.BinaryData para o componente para exibição.

Como faço para aplicar proteção por senha a um PDF?

A proteção por senha restringe o acesso a documentos confidenciais, como relatórios financeiros ou registros de RH. O IronPDF suporta senhas de usuário (necessárias para abrir o documento) e senhas de proprietário (necessárias para alterar as permissões). O guia de segurança em PDF lista todas as opções de permissão disponíveis.

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>")

' Set the password required to open the document
pdf.Password = "user-open-password"
' Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password"
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights
pdf.SecuritySettings.AllowUserCopyPasteContent = False

pdf.SaveAs("protected-report.pdf")
$vbLabelText   $csharpLabel

Os PDFs protegidos por senha exibem uma solicitação de senha no navegador <iframe>. Essa abordagem funciona para documentos distribuídos por download; Para exibição direta sem aviso prévio, aplique a senha somente aos documentos retornados pelo método de download.

Como faço para exibir PDFs enviados pelo usuário?

Exibir um PDF que um usuário carregou requer a leitura dos bytes do arquivo recebido e sua codificação como um URI de dados. O componente de upload abaixo usa o controle InputFile do Blazor para capturar o arquivo e, em seguida, o exibe diretamente sem qualquer renderização adicional:

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Para PDFs enviados que exigem processamento no servidor antes da exibição, como marca d'água , extração de páginas ou reencriptação, carregue os bytes em um PdfDocument primeiro:

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
Dim pdf As New PdfDocument(bytes)
' Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}"
$vbLabelText   $csharpLabel

Isso mantém a mesma estrutura de componentes, ao mesmo tempo que permite o uso completo da API IronPDF no arquivo carregado.

Quais são os meus próximos passos?

Este guia abordou o fluxo de trabalho completo para um visualizador de PDF em Blazor com IronPDF: instalação no .NET 10, renderização de URL e HTML, personalização da saída com cabeçalhos e rodapés, interoperabilidade com JavaScript para downloads via navegador, a diferença arquitetônica entre Blazor Server e Blazor WebAssembly e quatro operações de documento: mesclagem, anotações, proteção por senha e uploads de usuários.

Para ampliar essa base, explore estes recursos:

Obtenha sua licença de avaliação gratuita para remover marcas d'água e testar o IronPDF em seu aplicativo Blazor . O IronPDF é compatível com .NET 10 , ASP.NET Core, Blazor Server e projetos Blazor WebAssembly hospedados sem configuração adicional. Para obter orientações adicionais sobre integração, consulte a documentação oficial do Blazor da Microsoft .

Perguntas frequentes

O que é um visualizador de PDF Blazor?

Um visualizador de PDF em Blazor é um componente que exibe documentos PDF embutidos em uma aplicação Blazor Server ou WebAssembly. Ele normalmente converte bytes de PDF em um URI de dados base64 e os renderiza dentro de um elemento iframe, dando aos usuários uma barra de ferramentas de navegador integrada para zoom, navegação e impressão.

Como exibo um PDF em uma aplicação Blazor Server?

Instale o IronPDF via NuGet, adicione sua chave de licença ao Program.cs, então use o ChromePdfRenderer para gerar bytes de PDF de uma URL ou string HTML. Codifique os bytes como um URI de dados base64 e atribua-o ao atributo src de um iframe no seu componente Razor.

O IronPDF pode rodar em um projeto Blazor WebAssembly?

O mecanismo de renderização do IronPDF requer binários nativos que não podem rodar no sandbox de WASM do navegador. Para projetos Blazor WebAssembly, crie um endpoint de API ASP.NET Core do lado do servidor que gere o PDF com o IronPDF e retorne os bytes. O cliente WASM chama esse endpoint via HttpClient e exibe o resultado.

Como faço para acionar um download de PDF em Blazor?

Injete IJSRuntime em seu componente, gere bytes de PDF com o IronPDF, envolva-os em um DotNetStreamReference e chame uma função JavaScript usando InvokeVoidAsync. A função JavaScript cria um URL Blob e clica em um elemento âncora para acionar o download do navegador.

Quais são os benefícios de usar o IronPDF para visualização de PDFs em Blazor?

O IronPDF usa um mecanismo de renderização do Chrome que converte com precisão a saída de HTML, CSS e JavaScript em formato PDF. Ele suporta .NET 10, funciona nas arquiteturas Blazor Server e WebAssembly, e fornece uma única API para geração de PDFs, mesclagem, anotações, proteção por senha e processamento de upload de usuário.

Como adiciono cabeçalhos e rodapés a um PDF gerado em Blazor?

Configure a propriedade RenderingOptions no ChromePdfRenderer antes de chamar um método de renderização. Use TextHeader e TextFooter para cabeçalhos e rodapés de texto simples com variáveis de modelo como {page}, {total-pages} e {date}. Para layouts baseados em HTML, use HtmlHeader e HtmlFooter.

Como mesclo múltiplos documentos PDF em Blazor?

Gere cada documento como uma instância de PdfDocument usando ChromePdfRenderer, então chame PdfDocument.Merge(pdf1, pdf2) para combiná-los. Passe o BinaryData do documento mesclado para o URI de dados base64 do seu componente Blazor para exibir o resultado combinado.

Posso exibir um PDF enviado pelo usuário em Blazor sem salvá-lo em disco?

Sim. Use o componente InputFile do Blazor para ler o arquivo enviado em um MemoryStream, converta os bytes para um URI de dados base64 e atribua-o ao atributo src de um iframe. Não é necessário gravar no sistema de arquivos. Para processamento do lado do servidor, carregue os bytes em uma instância de PdfDocument antes de codificar.

Como aplico proteção por senha a um PDF gerado em Blazor?

Após gerar o PdfDocument, defina a propriedade Password para a senha de abertura do usuário e use SecuritySettings.OwnerPassword para a senha do proprietário. Use SecuritySettings.AllowUserPrinting e AllowUserCopyPasteContent para controlar permissões antes de salvar ou codificar o documento.

O IronPDF é compatível com o .NET 10 para projetos de visualizadores de PDF em Blazor?

Sim. O IronPDF suporta .NET 10, .NET 9, .NET 8, .NET 6 e .NET Framework 4.6.2 e posteriores. Nenhuma configuração especial é necessária para usar o IronPDF em uma aplicação Blazor direcionada ao .NET 10.

Curtis Chau
Curtis Chau
  Converse agora mesmo com a equipe de engenharia.
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim