Wie man eine PDF in Blazor anzeigt (Leitfaden)

Einführung

Die PDF-Anzeigefunktionalität von Blazor in modernen Webanwendungen erfordert eine robuste PDF-Viewer-Komponente, die über die grundlegenden Browserfähigkeiten hinausgeht. Für .NET-Entwickler, die Blazor-Anwendungen erstellen, bietet IronPDF eine leistungsstarke PDF-Viewer-Lösung, die nahtlos in Ihre Blazor Server-App integriert werden kann. Dies ermöglicht es Ihnen, PDF-Dokumente mit hoher Leistung und umfangreicher Funktionalität anzuzeigen, ohne auf Drittanbieter-Browser-Tools angewiesen zu sein.

In diesem Tutorial werden wir erkunden, wie man einen Blazor-PDF-Viewer mit IronPDF implementiert und eine PDF-Viewer-Komponente erstellt, die PDF-Dateien öffnen, PDF-Inhalte verarbeiten und Benutzern eine intuitive Oberfläche zur Anzeige von PDF auf sowohl Desktop- als auch Mobiltelefonen bietet.

Einstieg in die Anzeige von PDFs mit IronPDF

Bevor Sie Ihren Blazor-PDF-Viewer implementieren, müssen Sie IronPDF installieren. Fügen Sie es Ihrer Blazor-Server-App über NuGet hinzu:

Install-Package IronPdf

Erstellen Sie als Nächstes eine neue Blazor-Anwendung und stellen Sie sicher, dass Sie die neueste Version von .NET Core installiert haben. Speichern Sie Ihre PDF-Dateien im wwwroot-Ordner für einfachen Zugriff oder bereiten Sie sich darauf vor, sie aus anderen Quellen wie Byte-Arrays oder URLs zu laden.

Erstellen Ihrer ersten Blazor PDF Viewer Komponente

Lassen Sie uns eine grundlegende Blazor-PDF-Viewer-Komponente erstellen, die PDF-Dokumente anzeigen kann. Erstellen Sie zunächst eine neue Razor-Komponente:

@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;
    private async Task LoadPdfDocument()
    {
        // Load PDF from file
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        // Create object URL for display
        pdfUrl = await CreateObjectUrl(pdfData);
    }
    private async Task<string> CreateObjectUrl(byte[] data)
    {
        var base64 = Convert.ToBase64String(data);
        return $"data:application/pdf;base64,{base64}";
    }
}

@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;
    private async Task LoadPdfDocument()
    {
        // Load PDF from file
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        // Create object URL for display
        pdfUrl = await CreateObjectUrl(pdfData);
    }
    private async Task<string> CreateObjectUrl(byte[] data)
    {
        var base64 = Convert.ToBase64String(data);
        return $"data:application/pdf;base64,{base64}";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Code erstellt eine einfache PDF-Viewer-Komponente, die ein PDF-Dokument lädt und es in einem iframe anzeigt. Die LoadPdfDocument-Methode liest PDF-Dateien vom gleichen Pfad (wwwroot-Ordner) und konvertiert sie in ein Byte-Array. Die CreateObjectUrl-Methode wandelt dieses Byte-Array dann in eine Daten-URL um, die das iframe anzeigen kann, sodass Benutzer das geladene PDF-Dokument problemlos anzeigen können.

Implementierung von JavaScript-Interop für verbesserte Anzeige

Für eine bessere Kontrolle über die PDF-Inhaltsanzeige können wir JavaScript-Funktionen verwenden, um die PDF-Viewer-Funktionalität zu handhaben:

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's 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;
    // Hold the reference to the loaded JavaScript module
    private IJSObjectReference? jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                // 1. Asynchronously load the JavaScript file as a module
                // This guarantees the script is loaded before the next line executes.
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                    "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }
    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return; // Should never happen if the module loads successfully
        try
        {
            var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
            if (!File.Exists(pdfPath))
            {
                ErrorMessage = $"File not found: {pdfPath}";
                return;
            }
            var pdf = PdfDocument.FromFile(pdfPath);
            var stream = new MemoryStream(pdf.BinaryData);
            // 2. Invoke the function using the module reference
            // Note: We only pass the function name here.
            await jsModule.InvokeVoidAsync("displayPdf",
                documentId, stream.ToArray());
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}";
        }
    }
    // IMPORTANT: Dispose of the module when the component is removed
    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's 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;
    // Hold the reference to the loaded JavaScript module
    private IJSObjectReference? jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                // 1. Asynchronously load the JavaScript file as a module
                // This guarantees the script is loaded before the next line executes.
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                    "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }
    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return; // Should never happen if the module loads successfully
        try
        {
            var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
            if (!File.Exists(pdfPath))
            {
                ErrorMessage = $"File not found: {pdfPath}";
                return;
            }
            var pdf = PdfDocument.FromFile(pdfPath);
            var stream = new MemoryStream(pdf.BinaryData);
            // 2. Invoke the function using the module reference
            // Note: We only pass the function name here.
            await jsModule.InvokeVoidAsync("displayPdf",
                documentId, stream.ToArray());
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}";
        }
    }
    // IMPORTANT: Dispose of the module when the component is removed
    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Fügen Sie diese JavaScript-Funktion zu Ihrer JavaScript-Datei im wwwroot-Ordner hinzu:

export function displayPdf(elementId, data) {
    // 1. Create a Blob from the byte array data
    const blob = new Blob([new Uint8Array(data)],
        { type: 'application/pdf' });
    // 2. Create a temporary URL for the Blob
    const url = URL.createObjectURL(blob);
    // 3. Find the container element
    const container = document.getElementById(elementId);
    if (!container) return;
    // 4. Clear any previous content
    container.innerHTML = '';
    // 5. Create and configure the iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    // 6. Append the iframe to the container
    container.appendChild(iframe);
}

export function displayPdf(elementId, data) {
    // 1. Create a Blob from the byte array data
    const blob = new Blob([new Uint8Array(data)],
        { type: 'application/pdf' });
    // 2. Create a temporary URL for the Blob
    const url = URL.createObjectURL(blob);
    // 3. Find the container element
    const container = document.getElementById(elementId);
    if (!container) return;
    // 4. Clear any previous content
    container.innerHTML = '';
    // 5. Create and configure the iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    // 6. Append the iframe to the container
    container.appendChild(iframe);
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Diese JavaScript-Funktion erstellt ein Blob aus den PDF-Daten und generiert eine Objekt-URL. Es erstellt dann dynamisch ein iframe-Element und fügt es dem Container hinzu. Dieser Ansatz gibt Ihnen mehr Kontrolle darüber, wie PDF-Seiten angezeigt werden, und ermöglicht eine bessere Handhabung des Lebenszyklus der PDF-Viewer-Komponente.

Laden von PDF-Dateien aus verschiedenen Quellen

Ihr Blazor-PDF-Viewer kann PDF-Dokumente aus verschiedenen Quellen abrufen und anzeigen:

private async Task LoadFromUrl()
{
    var client = new HttpClient();
    var response = await client.GetAsync("https://example.com/file.pdf");
    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>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}
private async Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}

private async Task LoadFromUrl()
{
    var client = new HttpClient();
    var response = await client.GetAsync("https://example.com/file.pdf");
    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>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}
private async Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Diese Methoden demonstrieren das Laden von PDF-Dateien aus URLs über HTTPS, das Konvertieren von HTML-Inhalten in PDF und das Anzeigen des resultierenden PDF-Inhalts. Die LoadFromUrl-Methode ruft PDF-Dokumente von entfernten Standorten ab, während LoadFromHtmlContent zeigt, wie HTML on-the-fly in PDF konvertiert wird, was Flexibilität hinsichtlich der Quellen Ihres Blazor-PDF-Viewer-Komponenteninhalts bietet.

Interaktive Funktionen hinzufügen

Erweitern Sie Ihren PDF-Viewer mit interaktiver Funktionalität:

@code {
    private int currentPage = 1;
    private int totalPages;
    private string rotationClass = "";
    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }
    private void RotateCounterclockwise()
    {
        // Counterclockwise switch orientation
        rotationClass = "rotate-270";
    }
    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }
    private async Task DownloadPdf()
    {
        var fileName = "document.pdf";
        await JSRuntime.InvokeVoidAsync("downloadFile", 
           pdfData, fileName);
    }
}

@code {
    private int currentPage = 1;
    private int totalPages;
    private string rotationClass = "";
    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }
    private void RotateCounterclockwise()
    {
        // Counterclockwise switch orientation
        rotationClass = "rotate-270";
    }
    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }
    private async Task DownloadPdf()
    {
        var fileName = "document.pdf";
        await JSRuntime.InvokeVoidAsync("downloadFile", 
           pdfData, fileName);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Code fügt die Navigation zwischen PDF-Seiten, Drehfunktionalität (einschließlich gegen den Uhrzeigersinn Orientierungsschalter) und die Möglichkeit hinzu, PDFs zu drucken. Die Download-Funktionalität ermöglicht es Benutzern, PDF-Dateien lokal zu speichern. Diese Funktionen verwandeln Ihren grundlegenden PDF-Viewer in einen leistungsstarken PDF-Viewer mit einer integrierten Symbolleiste, die wesentliche Funktionen für Benutzer bietet, die mit PDF-Dokumenten arbeiten.

Handhabung von PDF-Formularen und Anmerkungen

Für PDF-Dokumente mit Formularfeldern und Anmerkungen bietet IronPDF robuste Unterstützung:

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";
        }
    }
    // Enable form filling in viewer
    var modifiedPdf = pdfDocument.BinaryData;
    await DisplayPdfContent(pdfDocument);
}

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";
        }
    }
    // Enable form filling in viewer
    var modifiedPdf = pdfDocument.BinaryData;
    await DisplayPdfContent(pdfDocument);
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dies ermöglicht Formularausfüllfunktionen innerhalb Ihrer Blazor-PDF-Viewer-Komponente, sodass Benutzer direkt im Browser mit Formularfeldern interagieren können. Der Code iteriert durch Formularfelder im PDF-Dokument und kann programmatisch Werte festlegen, was ideal für Anwendungen ist, die eine dynamische Formularausfüllung erfordern.

Performance-Optimierung

Um eine hohe Leistung beim Anzeigen von PDFs sicherzustellen, insbesondere bei großen PDF-Dateien:

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);
        }
        // Process chunks for display
        await ProcessPdfChunks(chunks);
    }
}

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);
        }
        // Process chunks for display
        await ProcessPdfChunks(chunks);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Ansatz lädt große PDF-Dateien in Teilen, verhindert Speicherprobleme und gewährleistet eine reibungslose Leistung, selbst bei umfangreichen PDF-Dokumenten. Es ist besonders nützlich, wenn man mit PDF-Dateien auf Mobiltelefonen oder Geräten mit begrenzten Ressourcen arbeitet.

Sicherheitsüberlegungen für Ihre Blazor Anwendung

Beim Arbeiten mit passwortgeschützten PDF-Dateien:

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
    if (pdfDocument != null)
    {
       var headers = new Dictionary<string, string>
        {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        };
        await DisplayPdfContent(pdfDocument);
    }
}

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
    if (pdfDocument != null)
    {
       var headers = new Dictionary<string, string>
        {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        };
        await DisplayPdfContent(pdfDocument);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Code zeigt das Laden passwortgeschützter PDF-Dokumente unter Beibehaltung der Sicherheit durch ordnungsgemäße Kopfzeilenkonfiguration.

Abschluss

Die Implementierung eines Blazor-PDF-Viewers mit IronPDF bietet Entwicklern eine umfassende Lösung zum Anzeigen von PDFs in Webanwendungen. Von der grundlegenden Anzeige bis hin zu erweiterten Funktionen wie Formularausfüllung und Anmerkungen bietet IronPDFs PDF-Viewer-Komponente die für professionelle Anwendungen benötigte Funktionalität.

Die gezeigten Beispiele demonstrieren, wie man einen robusten Blazor-PDF-Viewer erstellt, der eine Vielzahl von PDF-Quellen handhaben, interaktive Funktionen bieten und eine hohe Leistung beibehalten kann. Egal, ob Sie einen einfachen Dokumenten-Viewer oder ein komplexes Dokumentenmanagementsystem erstellen, die Integration von IronPDF in Blazor-Server-Apps erleichtert die Implementierung von professionellen PDF-Anzeigefunktionen.

Bereit, Ihren eigenen PDF-Viewer zu implementieren? Starten Sie noch heute Ihre kostenlose Testversion von IronPDF und erhalten Sie vollständige Dokumentation, Demo-Anwendungen und Entwicklerunterstützung, um leistungsstarke PDF-Anzeigeerlebnisse in Ihren Blazor-Anwendungen zu erstellen.