Para mostrar archivos PDF en aplicaciones Blazor , utilice el componente visor de PDF de IronPDF, que se integra con las aplicaciones Blazor Server y proporciona una representación de PDF de alto rendimiento con funciones como llenado de formularios, anotaciones y compatibilidad con dispositivos móviles, todo ello sin depender de herramientas de navegador de terceros.
Para visualizar archivos PDF en aplicaciones web modernas se necesita un componente de visualización confiable que vaya más allá de las capacidades básicas del navegador. Para los desarrolladores .NET que crean aplicaciones Blazor , IronPDF ofrece una solución de visualización de PDF eficaz que se integra con su aplicación Blazor Server . Esto permite una representación de PDF de alto rendimiento y una gran funcionalidad sin depender de herramientas de navegador de terceros.
La compatibilidad nativa de PDF con los navegadores varía significativamente entre los distintos navegadores y plataformas, lo que genera experiencias de usuario inconsistentes. Al implementar un visor de PDF personalizado en su aplicación Blazor , obtiene control total sobre la experiencia de visualización, lo que garantiza una funcionalidad consistente en todas las plataformas. Esto es particularmente importante para aplicaciones que requieren estándares de cumplimiento y funciones de seguridad avanzadas.
El marco Blazor , desarrollado sobre ASP.NET Core de Microsoft , permite el desarrollo basado en componentes que se combinan naturalmente con las bibliotecas de manipulación de PDF. En lugar de incorporar un widget de visualización de terceros desde una CDN externa, puede crear un componente adaptado a los requisitos exactos de su aplicación.
Antes de implementar su visor de PDF Blazor , instale IronPDF. Agréguelo a su aplicación Blazor Server a través de NuGet usando la Consola del Administrador de paquetes o la CLI de .NET :
A continuación, cree una nueva aplicación Blazor y asegúrese de tener instalada la última versión de .NET . Almacene archivos PDF en la carpeta wwwroot para acceder fácilmente a ellos o cárguelos desde otras fuentes como matrices de bytes o URL. La descripción general de la instalación proporciona orientación detallada para varios escenarios de implementación.
Para implementar con éxito un visor de PDF de Blazor , asegúrese de tener:
wwwroot)Para la implementación de Windows , asegúrese de tener el entorno de ejecución de Visual C++ adecuado. Los usuarios de Linux deben instalar las dependencias necesarias, mientras que los desarrolladores de macOS deben considerar la compatibilidad entre Intel y Apple Silicon.
La ubicación de almacenamiento de archivos PDF afecta significativamente el rendimiento y la seguridad de su aplicación. Para las aplicaciones Blazor , considere estas opciones:
Cree un componente visor de PDF básico de Blazor que pueda mostrar documentos PDF. Cree un nuevo componente Razor en su proyecto:
@page "/pdfviewer"
@rendermode InteractiveServer
@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 Function
End CodeEste código crea un componente visor de PDF que carga un documento PDF y lo muestra usando un iframe. El método LoadPdfDocument lee un PDF de la carpeta wwwroot y lo convierte en una URL de datos base64 que el iframe procesa directamente. Este enfoque funciona bien con varias versiones de PDF y admite la codificación UTF-8 para documentos internacionales.
El componente utiliza las capacidades de carga de documentos de IronPDF para leer archivos PDF de manera eficiente. Cuando un usuario hace clic en el botón "Abrir archivo", el método:
PdfDocument.FromFileEste enfoque garantiza la compatibilidad entre diferentes navegadores y al mismo tiempo mantiene un buen rendimiento para la visualización de PDF. El componente puede manejar varios tamaños de papel y orientaciones de página .
Para un mejor control sobre la visualización del contenido PDF, utilice la interoperabilidad de JavaScript para manejar la funcionalidad del visor de PDF. Este patrón carga un módulo JavaScript de forma asincrónica y delega la representación a las API de blob/URL nativas del navegador, una técnica muy adecuada para el ciclo de vida de los componentes de Blazor:
@page "/pdf-jsinterop"
@rendermode InteractiveServer
@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
Imports Microsoft.AspNetCore.Hosting
@page "/pdf-jsinterop"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime
@inject 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
}Agregue la función JavaScript correspondiente a su archivo wwwroot/pdfViewerInterop.js. Tenga en cuenta que este archivo usa JavaScript (no C#) y se guarda como un 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 función de JavaScript crea un blob a partir de los datos PDF, genera una URL de objeto y agrega un iframe al contenedor. La técnica admite la representación de JavaScript y retrasos de representación personalizados para documentos complejos.
Su visor de PDF Blazor puede recuperar y mostrar documentos PDF de varias fuentes. El siguiente ejemplo muestra la carga desde una URL y desde contenido 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 FunctionEl método LoadFromUrl recupera documentos PDF de ubicaciones remotas, mientras que LoadFromHtmlContent muestra cómo convertir HTML a PDF sobre la marcha. El motor de renderizado de Chrome garantiza una conversión HTML precisa. Las opciones de origen adicionales incluyen Azure Almacenamiento Blob, flujos de memoria de base de datos y documentos DOCX .
| Tipo de fuente | Mejor para | Actuación | Seguridad |
|---|---|---|---|
| Archivos locales | Contenido estático | Excelente | Bajo |
| URL | Documentos externos | Bien | Medio |
| Conversión HTML | Informes dinámicos | Variable | Alto |
| Almacenamiento Blob | Aplicaciones empresariales | Excelente | Alto |
| Flujos de memoria | PDF temporales | Excelente | Alto |
Amplíe el visor de PDF con funciones de navegación de páginas, rotación, impresión y descarga:
@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 agrega funcionalidades de navegación, rotación , impresión y descarga de páginas. Considere agregar números de página y marcadores para documentos con mucha navegación. Las funciones avanzadas pueden incluir extracción de texto y conversión de PDF a HTML.
Para documentos PDF con campos de formulario y anotaciones , IronPDF proporciona un soporte sólido para leer y escribir valores de campo mediante programación:
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 FunctionEsto habilita las capacidades de completar formularios dentro del visor de PDF de Blazor , lo que permite a los usuarios interactuar con los campos de formulario directamente en el navegador. El código itera a través de los campos del formulario y establece valores programáticamente, lo que es ideal para aplicaciones que requieren llenado previo dinámico. IronPDF también admite firmas digitales y anotaciones de texto.
Los tipos de campos admitidos incluyen entradas de texto, casillas de verificación, botones de opción, listas desplegables, campos de firma digital, áreas de texto de varias líneas y selectores de fecha.
| Acercarse | Usar cuando | Beneficios |
|---|---|---|
| Programático | Prellenado de datos conocidos | Más rápido, consistente y automatizado |
| Interactivo | Se requiere entrada del usuario | Validación flexible e inmediata |
| Híbrido | Datos parciales disponibles | Lo mejor de ambos enfoques |
Considere aplanar los formularios después de enviarlos para evitar manipulaciones. Utilice la desinfección de PDF por seguridad.
Para garantizar un buen rendimiento al mostrar archivos PDF, especialmente para archivos grandes, utilice la carga fragmentada y la gestión de memoria:
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 FunctionEste enfoque carga archivos PDF grandes en fragmentos, lo que evita problemas de memoria y garantiza un rendimiento fluido incluso con documentos grandes. Es especialmente útil cuando se trabaja con archivos PDF en dispositivos móviles o sistemas con recursos limitados. Consulte la guía de rendimiento de IronPDF para obtener opciones de ajuste adicionales.
Las estrategias de optimización adicionales incluyen linealización para una visualización web rápida, compresión para reducir el tamaño de los archivos y procesamiento asincrónico para manejar varios PDF simultáneamente. Según las mejores prácticas de la PDF Association , los PDF linealizados (optimizados para la web) pueden reducir el tiempo de carga inicial entre un 30 y un 60 % para documentos grandes.
| Tamaño del archivo | Estrategia de carga | Impacto en la memoria |
|---|---|---|
| Menos de 5 MB | Carga directa | Mínimo |
| 5-20 MB | Fragmentación opcional | Moderado |
| 20-50 MB | Fragmentación recomendada | Significativo |
| Más de 50 MB | Fragmentación requerida | Crítico |
La renderización del lado del servidor resulta beneficiosa cuando se procesan archivos PDF de más de 100 MB, se implementan anotaciones complejas o se admiten múltiples usuarios simultáneos.
Al trabajar con archivos PDF protegidos con contraseña , pase la contraseña directamente a PdfDocument.FromFile y configure los encabezados de seguridad HTTP adecuados:
private async Task LoadSecurePdf(string password)
{
var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
var headers = new Dictionary<string, string>
{
{ "X-Frame-Options", "SAMEORIGIN" },
{ "Content-Security-Policy", "default-src 'self'" },
{ "X-Content-Type-Options", "nosniff" },
{ "Referrer-Policy", "no-referrer" }
};
await DisplayPdfContent(pdfDocument);
}Private Async Function LoadSecurePdf(password As String) As Task
Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)
Dim headers = New Dictionary(Of String, String) From {
{"X-Frame-Options", "SAMEORIGIN"},
{"Content-Security-Policy", "default-src 'self'"},
{"X-Content-Type-Options", "nosniff"},
{"Referrer-Policy", "no-referrer"}
}
Await DisplayPdfContent(pdfDocument)
End FunctionEste código demuestra cómo cargar documentos PDF protegidos con contraseña manteniendo la seguridad mediante una configuración de encabezado adecuada. Considere las firmas digitales para una mejor autenticación. Implemente la desinfección de PDF para eliminar contenido potencialmente malicioso y redactar información confidencial.
Al manipular contraseñas, nunca las almacene en texto simple o en código del lado del cliente. Utilice métodos de entrada seguros con la validación adecuada, implemente tiempos de espera de sesión para documentos confidenciales y borre las contraseñas de la memoria después de su uso. La guía de seguridad de ASP.NET Core de Microsoft recomienda siempre validar y desinfectar cualquier credencial proporcionada por el usuario antes de pasarla a las API posteriores.
| Tipo de descifrado | Caso de uso | Nivel de seguridad |
|---|---|---|
| Del lado del cliente | Documentos públicos | Bajo |
| Del lado del servidor | Datos sensibles | Alto |
| Híbrido | Contenido mixto | Medio |
Para obtener la máxima seguridad, realice siempre el descifrado en el servidor y transmita el contenido descifrado de forma segura al cliente. Implementar el cumplimiento de PDF/A para las necesidades de archivo a largo plazo.
La implementación de un visor de PDF Blazor con IronPDF proporciona a los desarrolladores una solución completa para mostrar archivos PDF en aplicaciones web. Desde la visualización básica hasta funciones avanzadas como el llenado de formularios y anotaciones, el componente visor de PDF de IronPDF ofrece la funcionalidad necesaria para aplicaciones profesionales.
Los ejemplos que se muestran demuestran cómo crear un visor de PDF Blazor confiable que maneja varias fuentes de PDF, proporciona funciones interactivas y mantiene un buen rendimiento. Ya sea que se trate de crear un visor de documentos simple o un sistema de gestión de documentos complejo, la integración de IronPDF con las aplicaciones de Blazor Server facilita la implementación de capacidades profesionales de visualización de PDF.
Los beneficios clave incluyen:
IronPDF es compatible con Azure, AWS, Docker y entornos Windows tradicionales. ¿Estás listo para construir tu propio visor? Comience con una prueba gratuita de IronPDF y consulte la documentación completa y los ejemplos de código para crear experiencias de visualización de PDF efectivas en sus aplicaciones Blazor .
Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien estructurados y visualmente atractivos.
IronPDF es parte de IRONSUITE
10 productos API .NET para tus documentos de oficina
Cuando necesitas que tu PDF se parezca al HTML, rápido.
