Quais são os pré-requisitos para o meu projeto Blazor ?

Comece criando um novo projeto Blazor Server no Visual Studio 2022. Instale o IronPDF através do Console do Gerenciador de Pacotes NuGet :

Install-Package IronPdf

Configure sua licença do IronPDF em Program.cs para habilitar todas as funcionalidades:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Você precisará inserir uma chave de licença para desbloquear todos os recursos. O IronPDF funciona perfeitamente com aplicações Blazor Server , oferecendo recursos robustos de geração de PDFs para aplicações web modernas. Se você é novo no IronPDF, confira o guia de início rápido para se familiarizar com os conceitos básicos.

Por que o Blazor não consegue abrir PDFs diretamente em novas abas?

Os aplicativos Blazor Server não podem manipular diretamente as abas do navegador a partir do código C# no servidor. Abrir um PDF em uma nova aba a partir do Blazor requer interoperabilidade com JavaScript (JS interop) para fazer a ponte entre a geração de PDFs no servidor e o gerenciamento de janelas no lado do cliente.

O IronPDF permite que os desenvolvedores gerem documentos PDF de alta qualidade no servidor, que podem então ser exibidos usando a funcionalidade window.open() do JavaScript. Essa abordagem resolve um problema comum de limite cliente-servidor em aplicações .NET . O mecanismo de renderização Chrome da biblioteca garante uma conversão de HTML para PDF perfeita em termos de pixels , mantendo a integridade visual dos seus documentos.

Ao trabalhar com Blazor e IronPDF , é importante entender que a execução do JavaScript ocorre no lado do cliente, enquanto a geração do PDF ocorre no servidor. Essa separação exige o uso da interoperabilidade com JavaScript para tarefas de gerenciamento de janelas.

Como implementar funções JavaScript em meu aplicativo web Blazor ?

Adicione este código JavaScript ao seu arquivo _Host.cshtml para gerenciar a exibição de PDFs em novas abas do navegador. Este módulo gerencia as operações da janela do lado do cliente:

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' }); 
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' }); 
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

A função JavaScript window.openPdfInNewTab é crucial para abrir uma nova aba a partir do servidor. Ele aceita os dados do PDF como uma string Base64 do servidor Blazor , e o código do lado do cliente os converte em um objeto binário Blob. Essa abordagem é semelhante à conversão de PDF para Base64 , mas ao contrário, permitindo que o navegador exiba o conteúdo do PDF.

Esse blob é então usado para criar um URL temporário, que é finalmente passado para window.open(blobUrl, '_blank') para forçar o navegador a abrir o PDF em uma nova aba. A técnica de URL blob é comumente usada ao carregar PDFs da memória sem a necessidade de armazenamento de arquivos no servidor.

Para aplicações que exigem maior segurança, considere implementar permissões e senhas para PDFs antes de transmitir o documento ao cliente. Você também pode explorar as assinaturas digitais para garantir a autenticidade dos documentos.

Como faço para criar um componente Blazor ?

Crie um novo componente Razor que gere PDFs e os abra em novas abas. Isso serve como modelo principal para a solução:

@page "/pdf-viewer"
@using IronPdf
@inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
    <input @bind="targetUrl" class="form-control" />
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" 
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "___PROTECTED_URL_69___";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() => 
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab", 
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site."; 
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

Este bloco de código define a página interativa principal. A linguagem de marcação Razor cria uma interface de usuário simples com um campo de entrada de URL e um botão. O bloco C# @code lida com a lógica: quando o botão é clicado, ele usa uma instância de ChromePdfRenderer para gerar o PDF a partir da URL fornecida pelo usuário. As opções de renderização permitem personalizar as margens , ativar a renderização em JavaScript e definir atrasos de renderização para conteúdo dinâmico.

Em seguida, converte a matriz de bytes do PDF resultante em uma string Base64 e usa @inject IJSRuntime JS para chamar a função JavaScript , abrindo o documento para o usuário. Esse padrão é particularmente útil ao converter URLs em PDF em aplicações web. Para cenários mais complexos, talvez seja interessante implementar a geração assíncrona de PDFs para obter melhor desempenho.

Considere implementar um sistema de registro personalizado para acompanhar as atividades de geração de PDFs e solucionar problemas. Você também pode adicionar marcas d'água , cabeçalhos e rodapés para aprimorar seus PDFs.

Como trabalhar com conteúdo HTML dinâmico?

Para gerar PDFs a partir de conteúdo dinâmico em vez de URLs, modifique sua abordagem para usar RenderHtmlAsPdf:

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab", 
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab", 
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

Private Async Function GenerateFromHtml() As Task
    ' Define CSS styles inside the HTML string for structure and appearance.
    Dim htmlContent As String = $"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>"
    Dim renderer = New ChromePdfRenderer()
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Dim pdfBytes As Byte() = pdfDocument.BinaryData
    Await JS.InvokeVoidAsync("openPdfInNewTab", Convert.ToBase64String(pdfBytes), "dynamic.pdf")
End Function

O método GenerateFromHtml demonstra como o IronPDF pode gerar um PDF a partir de marcação HTML gerada dinamicamente em vez de uma URL existente. Constrói uma string HTML completa contendo um cabeçalho, conteúdo e dados dinâmicos. O método RenderHtmlAsPdf lida com a conversão de forma transparente. Essa abordagem é perfeita para criar relatórios em PDF com dados dinâmicos provenientes de bancos de dados ou APIs.

Você pode aprimorar seu conteúdo HTML com fontes personalizadas , CSS responsivo e até mesmo imagens incorporadas usando DataURIs . Para layouts complexos, considere usar Bootstrap e Flexbox para garantir uma renderização consistente.

Ao trabalhar com idiomas internacionais , o IronPDF oferece excelente suporte a Unicode para garantir a renderização correta de caracteres em diferentes idiomas e alfabetos. Você também pode controlar as quebras de página e implementar tamanhos de papel personalizados para atender a requisitos específicos de documentos.

Quais são os problemas comuns que devo abordar?

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData

        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

Quais alternativas de navegação posso usar?

Além da interoperabilidade com JavaScript , você pode disponibilizar PDFs por meio de middleware de arquivos estáticos e usar tags de âncora HTML padrão para navegação alternativa:

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

Essa abordagem funciona bem para PDFs pré-gerados, mas não possui os recursos de geração dinâmica do método de interoperabilidade com JavaScript. Para cenários mais avançados, considere implementar um componente dedicado para visualização de PDFs ou usar o MemoryStream para disponibilizar PDFs sem salvá-los em disco.

Você também pode explorar a possibilidade de salvar PDFs em armazenamento em nuvem, como o Azure Blob Storage, para obter melhor escalabilidade. Para aplicações que exigem acesso offline, considere implementar a funcionalidade de download de PDF juntamente com o recurso de nova aba.

Quais são as melhores práticas que devo seguir?

1. Tratamento de erros: Envolva a geração do PDF em blocos try-catch com mensagens de erro significativas. Monitore problemas usando registro de erros personalizado .

2. Desempenho: Use async/await para evitar o bloqueio da interface do usuário. Implemente atrasos de renderização para páginas com uso intensivo de JavaScript. Pré-aqueça o motor para renderizações iniciais mais rápidas .

3. Experiência do usuário: Exibir indicadores de carregamento e lidar com bloqueadores de pop-up de forma adequada. Acompanhe o progresso de PDFs com várias páginas . Forneça feedback claro sobre problemas de rede .

4. Manipulação do DOM: Lembre-se de que o C# do lado do servidor não pode manipular diretamente o DOM do cliente. Utilize listeners de mensagens JavaScript para interações complexas.

5. Segurança: Valide todas as entradas do usuário antes da geração do PDF. Aplique sanitização de PDF , assinaturas digitais e criptografia conforme necessário. Use HTTPS para transmissão segura .

6. Gerenciamento de recursos: Descarte documentos PDF adequadamente e evite vazamentos de memória . Monitore o tamanho do pacote para implantações em contêineres otimizadas.

Conclusão

A combinação dos poderosos recursos de geração de PDF do IronPDF com a interoperabilidade JavaScript do Blazor oferece uma solução robusta para abrir PDFs em novas abas do navegador. Essa abordagem permite que os desenvolvedores criem documentos PDF dinâmicos e profissionais que se integram perfeitamente com aplicativos Blazor modernos. Seja para converter HTML em PDF , criar formulários ou organizar documentos complexos , o IronPDF oferece as ferramentas necessárias para o processamento de PDFs em nível empresarial.

Pronto para implementar a funcionalidade de PDF no seu projeto Blazor ? Comece hoje mesmo seu teste gratuito do IronPDF . A versão de avaliação inclui todas as funcionalidades sem marcas d'água e suporte completo para garantir o seu sucesso. Para implantações em produção, explore nossas opções de licenciamento e guias de implantação para diversas plataformas, incluindo Windows , Linux e Azure .