Para exibir PDFs em aplicativos Blazor , use o componente visualizador de PDF do IronPDF, que se integra aos aplicativos Blazor Server e oferece renderização de PDF de alto desempenho com recursos como preenchimento de formulários, anotações e suporte para dispositivos móveis — tudo isso sem depender de ferramentas de navegador de terceiros.
Exibir PDFs em aplicações web modernas exige um componente visualizador confiável que vá além das capacidades básicas de um navegador. Para desenvolvedores .NET que criam aplicativos Blazor , o IronPDF oferece uma solução eficaz de visualização de PDF que se integra ao seu aplicativo Blazor Server . Isso possibilita a renderização de PDFs de alto desempenho e funcionalidades avançadas sem depender de ferramentas de terceiros do navegador.
O suporte nativo a PDF nos navegadores varia significativamente entre diferentes navegadores e plataformas, resultando em experiências de usuário inconsistentes. Ao implementar um visualizador de PDF personalizado em seu aplicativo Blazor , você obtém controle total sobre a experiência de visualização, garantindo funcionalidade consistente em todas as plataformas. Isso é particularmente importante para aplicações que exigem padrões de conformidade e recursos avançados de segurança.
O framework Blazor -- construído sobre o ASP.NET Core da Microsoft -- permite o desenvolvimento baseado em componentes, que se integra naturalmente com bibliotecas de manipulação de PDF. Em vez de incorporar um widget de visualização de terceiros a partir de uma CDN externa, você pode criar um componente personalizado para atender aos requisitos exatos do seu aplicativo.
Antes de implementar seu visualizador de PDF Blazor , instale o IronPDF. Adicione-o ao seu aplicativo Blazor Server por meio do NuGet, usando o Console do Gerenciador de Pacotes ou a CLI do .NET :
Em seguida, crie um novo aplicativo Blazor e certifique-se de ter a versão mais recente do .NET instalada. Armazene arquivos PDF na pasta wwwroot para fácil acesso, ou carregue-os de outras fontes, como matrizes de bytes ou URLs. A visão geral da instalação fornece orientações detalhadas para vários cenários de implantação.
Para implementar com sucesso um visualizador de PDF em Blazor , certifique-se de ter:
wwwroot)Para implantação no Windows , certifique-se de ter o ambiente de execução do Visual C++ apropriado. Usuários de Linux devem instalar as dependências necessárias, enquanto desenvolvedores de macOS precisam considerar a compatibilidade entre Intel e Apple Silicon.
O local de armazenamento de arquivos PDF impacta significativamente o desempenho e a segurança do seu aplicativo. Para aplicações Blazor , considere estas opções:
Crie um componente básico de visualização de PDF em Blazor que possa exibir documentos PDF. Crie um novo componente Razor em seu projeto:
@page "/pdfviewer"
@rendermode InterativoServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>PDF Viewer Component</h3>
<div>
<button @onclick="LoadPdfDocument">Open File</button>
<div id="pdfContainer">
@if (!string.IsNullOrEmpty(pdfUrl))
{
<iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
}
</div>
</div>
@code {
private string pdfUrl = "";
private byte[] pdfData = Array.Empty<byte>();
private async Task LoadPdfDocument()
{
var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
pdfData = pdfDocument.BinaryData;
var base64 = Convert.ToBase64String(pdfData);
pdfUrl = $"data:application/pdf;base64,{base64}";
}
}Imports IronPdf
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.AspNetCore.Components
Imports Microsoft.JSInterop
@page "/pdfviewer"
@rendermode InteractiveServer
<h3>PDF Viewer Component</h3>
<div>
<button @onclick="LoadPdfDocument">Open File</button>
<div id="pdfContainer">
@If Not String.IsNullOrEmpty(pdfUrl) Then
<iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
End If
</div>
</div>
@code
Private pdfUrl As String = ""
Private pdfData As Byte() = Array.Empty(Of Byte)()
Private Async Function LoadPdfDocument() As Task
Dim pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf")
pdfData = pdfDocument.BinaryData
Dim base64 = Convert.ToBase64String(pdfData)
pdfUrl = $"data:application/pdf;base64,{base64}"
End FunctionEste código cria um componente visualizador de PDF que carrega um documento PDF e o exibe usando um iframe. O método LoadPdfDocument lê um PDF da pasta wwwroot e o converte para um URL de dados base64 que o iframe renderiza diretamente. Essa abordagem funciona bem com diversas versões de PDF e suporta a codificação UTF-8 para documentos internacionais.
O componente utiliza os recursos de carregamento de documentos do IronPDF para ler arquivos PDF de forma eficiente. Quando um usuário clica no botão "Abrir arquivo", o método é o seguinte:
PdfDocument.FromFileEssa abordagem garante a compatibilidade entre diferentes navegadores, mantendo um bom desempenho na exibição de PDFs. O componente é compatível com diversos tamanhos de papel e orientações de página .
Para um melhor controle sobre a exibição do conteúdo do PDF, utilize a interoperabilidade com JavaScript para gerenciar a funcionalidade do visualizador de PDF. Esse padrão carrega um módulo JavaScript de forma assíncrona e delega a renderização às APIs nativas de blob/URL do navegador — uma técnica muito adequada ao ciclo de vida de componentes do Blazor:
@page "/pdf-jsinterop"
@rendermode InterativoServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
@implements IAsyncDisposable
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript Blob/ObjectURL capabilities.</p>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
<div class="alert alert-danger">Error: @ErrorMessage</div>
}
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
Loading PDF...
</div>
@code {
private string documentId = Guid.NewGuid().ToString();
private string ErrorMessage = string.Empty;
private bool pdfLoaded = false;
private IJSObjectReference? jsModule;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !pdfLoaded)
{
try
{
jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
"import", "./pdfViewerInterop.js");
await LoadPdfWithJavaScript();
pdfLoaded = true;
}
catch (Exception ex)
{
ErrorMessage = $"Failed to load JS module: {ex.Message}";
}
finally
{
StateHasChanged();
}
}
}
private async Task LoadPdfWithJavaScript()
{
if (jsModule is null) return;
var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
if (!File.Exists(pdfPath))
{
ErrorMessage = $"File not found: {pdfPath}";
return;
}
var pdf = PdfDocument.FromFile(pdfPath);
await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData);
}
public async ValueTask DisposeAsync()
{
if (jsModule is not null)
await jsModule.DisposeAsync();
}
}Imports System
Imports System.IO
Imports System.Threading.Tasks
Imports IronPdf
Imports Microsoft.AspNetCore.Components
Imports Microsoft.AspNetCore.Components.Web
Imports Microsoft.JSInterop
@page "/pdf-jsinterop"
@rendermode InterativoServer
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
@implements IAsyncDisposable
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript Blob/ObjectURL capabilities.</p>
@if Not String.IsNullOrEmpty(ErrorMessage) Then
<div class="alert alert-danger">Error: @ErrorMessage</div>
End If
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
Loading PDF...
</div>
@code {
Private documentId As String = Guid.NewGuid().ToString()
Private ErrorMessage As String = String.Empty
Private pdfLoaded As Boolean = False
Private jsModule As IJSObjectReference
Protected Overrides Async Function OnAfterRenderAsync(firstRender As Boolean) As Task
If firstRender AndAlso Not pdfLoaded Then
Try
jsModule = Await JSRuntime.InvokeAsync(Of IJSObjectReference)(
"import", "./pdfViewerInterop.js")
Await LoadPdfWithJavaScript()
pdfLoaded = True
Catch ex As Exception
ErrorMessage = $"Failed to load JS module: {ex.Message}"
Finally
StateHasChanged()
End Try
End If
End Function
Private Async Function LoadPdfWithJavaScript() As Task
If jsModule Is Nothing Then Return
Dim pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf")
If Not File.Exists(pdfPath) Then
ErrorMessage = $"File not found: {pdfPath}"
Return
End If
Dim pdf = PdfDocument.FromFile(pdfPath)
Await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData)
End Function
Public Async Function DisposeAsync() As ValueTask Implements IAsyncDisposable.DisposeAsync
If jsModule IsNot Nothing Then
Await jsModule.DisposeAsync()
End If
End Function
}Adicione a função JavaScript correspondente ao seu arquivo wwwroot/pdfViewerInterop.js. Note que este arquivo usa JavaScript (não C#), salvo como um módulo .js:
export function displayPdf(elementId, data) {
const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const container = document.getElementById(elementId);
if (!container) return;
container.innerHTML = '';
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.width = '100%';
iframe.style.height = '600px';
iframe.style.border = 'none';
container.appendChild(iframe);
}The provided code is JavaScript, not C#. Therefore, it cannot be directly converted to VB.NET, as VB.NET is a server-side language and JavaScript is a client-side language. If you have C# code that you need converted to VB.NET, please provide that code for conversion.Esta função JavaScript cria um blob a partir dos dados do PDF, gera um URL de objeto e anexa um iframe ao contêiner. A técnica suporta renderização em JavaScript e atrasos de renderização personalizados para documentos complexos.
Seu visualizador de PDF Blazor pode recuperar e exibir documentos PDF de diversas fontes. O exemplo abaixo mostra o carregamento a partir de uma URL e de conteúdo HTML:
private async Task LoadFromUrl(string url)
{
using var client = new HttpClient();
client.Timeout = TimeSpan.FromSeconds(30);
var response = await client.GetAsync(url);
response.EnsureSuccessStatusCode();
var stream = await response.Content.ReadAsStreamAsync();
var pdfDocument = new PdfDocument(stream);
await DisplayPdfContent(pdfDocument);
}
private async Task LoadFromHtmlContent()
{
var renderer = new ChromePdfRenderer();
var htmlContent = "<h1>Generated PDF</h1><p>Dynamic content from Blazor.</p>";
var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
await DisplayPdfContent(pdfDocument);
}
private Task DisplayPdfContent(PdfDocument document)
{
var data = document.BinaryData;
pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
return Task.CompletedTask;
}Imports System
Imports System.Net.Http
Imports System.Threading.Tasks
Private Async Function LoadFromUrl(url As String) As Task
Using client As New HttpClient()
client.Timeout = TimeSpan.FromSeconds(30)
Dim response = Await client.GetAsync(url)
response.EnsureSuccessStatusCode()
Dim stream = Await response.Content.ReadAsStreamAsync()
Dim pdfDocument As New PdfDocument(stream)
Await DisplayPdfContent(pdfDocument)
End Using
End Function
Private Async Function LoadFromHtmlContent() As Task
Dim renderer As New ChromePdfRenderer()
Dim htmlContent As String = "<h1>Generated PDF</h1><p>Dynamic content from Blazor.</p>"
Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
Await DisplayPdfContent(pdfDocument)
End Function
Private Function DisplayPdfContent(document As PdfDocument) As Task
Dim data = document.BinaryData
pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}"
Return Task.CompletedTask
End FunctionO método LoadFromUrl recupera documentos PDF de locais remotos, enquanto LoadFromHtmlContent mostra como converter HTML em PDF instantaneamente. O mecanismo de renderização do Chrome garante uma conversão precisa de HTML. Outras opções de origem incluem o Armazenamento de Blobs do Azure, fluxos de memória do banco de dados e documentos DOCX .
| Tipo de fonte | Ideal para | Desempenho | Segurança |
|---|---|---|---|
| Arquivos locais | Conteúdo estático | Excelente | Baixo |
| URLs | Documentos externos | Bom | Médio |
| Conversão de HTML | Relatórios dinâmicos | Variável | Alto |
| Armazenamento de Blobs | Aplicativos empresariais | Excelente | Alto |
| Fluxos de memória | PDFs temporários | Excelente | Alto |
Amplie o visualizador de PDF com funcionalidades de navegação de página, rotação, impressão e download:
@code {
private int currentPage = 1;
private int totalPages;
private byte[] pdfData = Array.Empty<byte>();
private string pdfUrl = "";
private string rotationClass = "";
private string documentId = Guid.NewGuid().ToString();
private async Task NavigateToPage(int page)
{
currentPage = page;
await JSRuntime.InvokeVoidAsync("navigateTo", page);
}
private void RotateCounterclockwise()
{
rotationClass = "rotate-270";
}
private async Task PrintPdf()
{
await JSRuntime.InvokeVoidAsync("printDocument", documentId);
}
private async Task DownloadPdf()
{
await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf");
}
}Imports System
Public Class CodeBehind
Private currentPage As Integer = 1
Private totalPages As Integer
Private pdfData As Byte() = Array.Empty(Of Byte)()
Private pdfUrl As String = ""
Private rotationClass As String = ""
Private documentId As String = Guid.NewGuid().ToString()
Private Async Function NavigateToPage(page As Integer) As Task
currentPage = page
Await JSRuntime.InvokeVoidAsync("navigateTo", page)
End Function
Private Sub RotateCounterclockwise()
rotationClass = "rotate-270"
End Sub
Private Async Function PrintPdf() As Task
Await JSRuntime.InvokeVoidAsync("printDocument", documentId)
End Function
Private Async Function DownloadPdf() As Task
Await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf")
End Function
End ClassEste código adiciona funcionalidades de navegação de página, rotação , impressão e download . Considere adicionar números de página e marcadores para documentos com muita navegação. Funcionalidades avançadas podem incluir extração de texto e conversão de PDF para HTML.
Para documentos PDF com campos de formulário e anotações , o IronPDF oferece suporte robusto para leitura e gravação programática de valores de campos:
private async Task ProcessFormFields()
{
var pdfDocument = PdfDocument.FromFile("form.pdf");
foreach (var field in pdfDocument.Form.Fields)
{
if (field.Type == PdfFormFieldType.Text)
{
field.Value = "User Input";
}
}
await DisplayPdfContent(pdfDocument);
}
private async Task SaveFormData()
{
var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");
var formData = pdfWithFormData.Form.Fields
.ToDictionary(f => f.Name, f => f.Value);
var json = System.Text.Json.JsonSerializer.Serialize(formData);
await File.WriteAllTextAsync("form-data.json", json);
pdfWithFormData.Form.Flatten();
pdfWithFormData.SaveAs("form-submission.pdf");
}Imports System.IO
Imports System.Threading.Tasks
Imports System.Text.Json
Private Async Function ProcessFormFields() As Task
Dim pdfDocument = PdfDocument.FromFile("form.pdf")
For Each field In pdfDocument.Form.Fields
If field.Type = PdfFormFieldType.Text Then
field.Value = "User Input"
End If
Next
Await DisplayPdfContent(pdfDocument)
End Function
Private Async Function SaveFormData() As Task
Dim pdfWithFormData = PdfDocument.FromFile("filled-form.pdf")
Dim formData = pdfWithFormData.Form.Fields.ToDictionary(Function(f) f.Name, Function(f) f.Value)
Dim json = JsonSerializer.Serialize(formData)
Await File.WriteAllTextAsync("form-data.json", json)
pdfWithFormData.Form.Flatten()
pdfWithFormData.SaveAs("form-submission.pdf")
End FunctionIsso possibilita o preenchimento de formulários dentro do visualizador de PDF do Blazor , permitindo que os usuários interajam com os campos do formulário diretamente no navegador. O código percorre os campos do formulário e define os valores programaticamente, o que é ideal para aplicações que exigem preenchimento prévio dinâmico. O IronPDF também suporta assinaturas digitais e anotações de texto.
Os tipos de campos suportados incluem entradas de texto, caixas de seleção, botões de opção, listas suspensas, campos de assinatura digital, áreas de texto com várias linhas e seletores de data.
| Abordagem | Usar quando | Benefícios |
|---|---|---|
| Programático | Preenchimento prévio de dados conhecidos | Mais rápido, consistente e automatizado. |
| Interativo | Entrada de dados do usuário necessária | Validação flexível e imediata |
| Híbrido | Dados parciais disponíveis | O melhor dos dois mundos |
Considere compactar os formulários após o envio para evitar adulteração. Utilize a sanitização de PDFs para segurança.
Para garantir um bom desempenho na exibição de PDFs, especialmente para arquivos grandes, utilize carregamento em partes e gerenciamento de memória:
private async Task LoadLargePdf()
{
const int chunkSize = 1024 * 1024; // 1MB chunks
var pdfPath = "largefile.pdf";
using var fileStream = File.OpenRead(pdfPath);
var buffer = new byte[chunkSize];
var chunks = new List<byte[]>();
int bytesRead;
while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
{
var chunk = new byte[bytesRead];
Array.Copy(buffer, chunk, bytesRead);
chunks.Add(chunk);
}
await ProcessPdfChunks(chunks);
}Imports System.IO
Imports System.Threading.Tasks
Private Async Function LoadLargePdf() As Task
Const chunkSize As Integer = 1024 * 1024 ' 1MB chunks
Dim pdfPath As String = "largefile.pdf"
Using fileStream As FileStream = File.OpenRead(pdfPath)
Dim buffer(chunkSize - 1) As Byte
Dim chunks As New List(Of Byte())()
Dim bytesRead As Integer
Do
bytesRead = Await fileStream.ReadAsync(buffer, 0, buffer.Length)
If bytesRead > 0 Then
Dim chunk(bytesRead - 1) As Byte
Array.Copy(buffer, chunk, bytesRead)
chunks.Add(chunk)
End If
Loop While bytesRead > 0
End Using
Await ProcessPdfChunks(chunks)
End FunctionEssa abordagem carrega arquivos PDF grandes em partes, evitando problemas de memória e garantindo um desempenho estável mesmo com documentos volumosos. É particularmente útil ao lidar com arquivos PDF em dispositivos móveis ou sistemas com recursos limitados. Consulte o guia de desempenho do IronPDF para opções adicionais de ajuste.
Estratégias adicionais de otimização incluem linearização para visualização rápida na web, compressão para reduzir o tamanho dos arquivos e processamento assíncrono para lidar com vários PDFs simultaneamente. De acordo com as melhores práticas da PDF Association , PDFs linearizados (otimizados para a web) podem reduzir o tempo de carregamento inicial em 30 a 60% para documentos grandes.
| Tamanho do arquivo | Estratégia de carregamento | Impacto na memória |
|---|---|---|
| Menos de 5 MB | Carregamento direto | Mínimo |
| 5 a 20 MB | Fragmentação opcional | Moderado |
| 20 a 50 MB | Divisão recomendada | Significativo |
| Mais de 50 MB | Divisão em partes necessária | Crítico |
A renderização no servidor torna-se vantajosa ao processar PDFs maiores que 100 MB, implementar anotações complexas ou suportar múltiplos usuários simultâneos.
Ao trabalhar com arquivos PDF protegidos por senha, passe a senha diretamente para PdfDocument.FromFile e configure os cabeçalhos de segurança HTTP apropriados:
private async Task LoadSecurePdf(string password)
{
var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
var headers = new Dictionary<string, string>
{
{ "X-Frame-Options", "SAMEORIGIN" },
{ "Content-Segurança-Policy", "default-src 'self'" },
{ "X-Content-Type-Options", "nosniff" },
{ "Referrer-Policy", "no-referrer" }
};
await DisplayPdfContent(pdfDocument);
}Imports System.Collections.Generic
Imports System.Threading.Tasks
Private Async Function LoadSecurePdf(password As String) As Task
Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)
Dim headers As New Dictionary(Of String, String) From {
{"X-Frame-Options", "SAMEORIGIN"},
{"Content-Segurança-Policy", "default-src 'self'"},
{"X-Content-Type-Options", "nosniff"},
{"Referrer-Policy", "no-referrer"}
}
Await DisplayPdfContent(pdfDocument)
End FunctionEste código demonstra o carregamento de documentos PDF protegidos por senha , mantendo a segurança através da configuração adequada do cabeçalho. Considere assinaturas digitais para uma autenticação aprimorada. Implemente a higienização de PDFs para remover conteúdo potencialmente malicioso e ocultar informações confidenciais.
Ao lidar com senhas, nunca as armazene em texto simples ou em código do lado do cliente. Utilize métodos de entrada seguros com validação adequada, implemente tempos limite de sessão para documentos confidenciais e apague as senhas da memória após o uso. As diretrizes de segurança do ASP.NET Core da Microsoft recomendam sempre validar e higienizar quaisquer credenciais fornecidas pelo usuário antes de passá-las para APIs subsequentes.
| Tipo de descriptografia | Caso de uso | Nível de segurança |
|---|---|---|
| Lado do cliente | Documentos públicos | Baixo |
| Lado do servidor | Dados sensíveis | Alto |
| Híbrido | Conteúdo misto | Médio |
Para máxima segurança, sempre realize a descriptografia no servidor e transmita o conteúdo descriptografado para o cliente de forma segura. Implementar a conformidade com o formato PDF/A para atender às necessidades de arquivamento a longo prazo.
Implementar um visualizador de PDF em Blazor com IronPDF oferece aos desenvolvedores uma solução completa para exibir PDFs em aplicações web. Desde a visualização básica até recursos avançados como preenchimento de formulários e anotações, o componente de visualização de PDF do IronPDF oferece a funcionalidade necessária para aplicações profissionais.
Os exemplos apresentados demonstram como criar um visualizador de PDF Blazor confiável que lida com diversas fontes de PDF, oferece recursos interativos e mantém um bom desempenho. Seja para criar um visualizador de documentos simples ou um sistema complexo de gerenciamento de documentos, a integração do IronPDF com aplicativos Blazor Server facilita a implementação de recursos profissionais de visualização de PDFs.
Os principais benefícios incluem:
O IronPDF é compatível com Azure, AWS, Docker e ambientes Windows tradicionais. Pronto para construir seu próprio visualizador? Comece com um teste gratuito do IronPDF e consulte a documentação completa e os exemplos de código para criar experiências eficazes de visualização de PDFs em seus aplicativos Blazor .
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 bem estruturados e visualmente atraentes.
IronPDF faz parte do IRON SUITE.
10 produtos de API .NET para seus documentos de escritório
Quando você precisa que seu PDF tenha a aparência de HTML, rapidamente.
