Wie man ein PDF in Blazor anzeigt

Warum benötige ich eine PDF-Viewer-Komponente in Blazor?

Die Anzeige von PDFs in modernen Webanwendungen erfordert eine zuverlässige Viewer-Komponente, die über die grundlegenden Browserfunktionen hinausgeht. Für .NET-Entwickler, die Blazor-Anwendungen erstellen, bietet IronPDF eine effektive PDF-Viewer-Lösung , die sich nahtlos in Ihre Blazor Server-App integriert. Dies ermöglicht es Ihnen, PDF-Dokumente mit hoher Leistung und umfangreichen Funktionen anzuzeigen, ohne auf Browser-Tools von Drittanbietern angewiesen zu sein.

In diesem Tutorial erfahren Sie, wie Sie mit IronPDF einen Blazor PDF-Viewer implementieren. Wir erstellen eine PDF-Viewer-Komponente , die PDF-Dateien öffnen, PDF-Inhalte verarbeiten und Benutzern eine intuitive Benutzeroberfläche zur Anzeige von PDFs auf Desktop- und Mobilgeräten bieten kann. Die Chrome-Rendering-Engine gewährleistet eine einheitliche Darstellung auf allen Plattformen.

Die Notwendigkeit einer dedizierten PDF-Viewer-Komponente wird deutlich, wenn man die Einschränkungen der Browser berücksichtigt. Die native PDF-Unterstützung von Browsern variiert stark zwischen verschiedenen Browsern und Plattformen, was zu uneinheitlichen Benutzererfahrungen führt. Durch die Implementierung eines benutzerdefinierten PDF-Viewers in Ihrer Blazor-Anwendung erhalten Sie die volle Kontrolle über das Anzeigeerlebnis und gewährleisten so eine konsistente Funktionalität auf allen Plattformen. Dies ist besonders wichtig für Anwendungen, die Compliance-Standards und Sicherheitsfunktionen erfordern.

Wie beginne ich mit der 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, um einen einfachen Zugriff zu ermöglichen, oder bereiten Sie sich darauf vor, sie aus anderen Quellen wie Byte-Arrays oder URLs zu laden. Die Installationsübersicht bietet detaillierte Anleitungen für verschiedene Einsatzszenarien.

Wie erstelle ich meine erste 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}";
    }
}

Imports IronPdf
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.AspNetCore.Components
Imports Microsoft.JSInterop

@page "/pdfviewer"
@rendermode InteractiveServer

@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<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()

    Private Async Function LoadPdfDocument() As Task
        ' Load PDF from file
        Dim pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf")
        pdfData = pdfDocument.BinaryData
        ' Create object URL for display
        pdfUrl = Await CreateObjectUrl(pdfData)
    End Function

    Private Async Function CreateObjectUrl(data As Byte()) As Task(Of String)
        Dim base64 = Convert.ToBase64String(data)
        Return $"data:application/pdf;base64,{base64}"
    End Function
End Code

Dieser Code erstellt eine einfache PDF-Viewer-Komponente, die ein PDF-Dokument lädt und es mithilfe eines iFrames anzeigt. Die LoadPdfDocument Methode liest PDF-Dateien aus dem wwwroot-Ordner und konvertiert sie in ein Byte-Array. Die Methode CreateObjectUrl wandelt dieses Byte-Array dann in eine Daten-URL um, die der iFrame anzeigen kann, sodass Benutzer das geladene PDF-Dokument anzeigen können. Dieser Ansatz funktioniert gut mit verschiedenen PDF-Versionen und unterstützt die UTF-8-Kodierung .

Wie implementiere ich JavaScript Interop zur Verbesserung der Darstellung?

Um die Darstellung von PDF-Inhalten besser steuern zu können, können wir JavaScript-Funktionen verwenden, um die Funktionalität des PDF-Viewers zu steuern:

@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();
        }
    }
}

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

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's 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
    ' Hold the reference to the loaded JavaScript module
    Private jsModule As IJSObjectReference

    Protected Overrides Async Function OnAfterRenderAsync(firstRender As Boolean) As Task
        If firstRender AndAlso Not pdfLoaded Then
            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(Of IJSObjectReference)("import", "./pdfViewerInterop.js")
                Await LoadPdfWithJavaScript()
                pdfLoaded = True
            Catch ex As Exception
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}"
            Finally
                StateHasChanged()
            End Try
        End If
    End Function

    Private Async Function LoadPdfWithJavaScript() As Task
        If jsModule Is Nothing Then Return ' Should never happen if the module loads successfully
        Try
            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)
            Dim 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 ex As Exception
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}"
        End Try
    End Function

    ' IMPORTANT: Dispose of the module when the component is removed
    Public Async Function DisposeAsync() As ValueTask Implements IAsyncDisposable.DisposeAsync
        If jsModule IsNot Nothing Then
            Await jsModule.DisposeAsync()
        End If
    End Function
End Code

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);
}

The provided code is JavaScript, not C#. Therefore, it cannot be directly converted to VB.NET. However, if you have a C# code snippet that you would like to convert to VB.NET, please provide it, and I will assist you with the conversion.

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 über die Darstellung von PDF-Seiten und ermöglicht eine bessere Verwaltung des Lebenszyklus der PDF-Viewer-Komponente. Die Technik unterstützt JavaScript-Rendering und benutzerdefinierte Rendering-Verzögerungen für komplexe Dokumente.

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

Try
    ' Check if the browser supports required features
    If Not window.Blob OrElse Not window.URL Then
        Throw New Exception("Browser doesn't support required PDF viewing features")
    End If
    ' Validate PDF data before processing
    If data Is Nothing OrElse data.length = 0 Then
        Throw New Exception("Invalid PDF data received")
    End If
    ' Monitor memory usage for large files
    If data.length > 50 * 1024 * 1024 Then ' 50MB threshold
        Console.Warn("Large PDF detected, performance may be affected")
    End If
Catch error As Exception
    Console.Error.WriteLine("PDF viewing error: " & error.ToString())
    ' Fallback to server-side rendering
End Try

Wie kann ich PDF-Dateien aus verschiedenen Quellen laden?

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("___PROTECTED_URL_116___");
    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("___PROTECTED_URL_116___");
    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 Function LoadFromUrl() As Task
    Dim client = New HttpClient()
    Dim response = Await client.GetAsync("___PROTECTED_URL_116___")
    Dim stream = Await response.Content.ReadAsStreamAsync()
    Dim pdfDocument = New PdfDocument(stream)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function LoadFromHtmlContent() As Task
    Dim renderer = New ChromePdfRenderer()
    Dim htmlContent = "<h1>Generated PDF</h1>"
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function DisplayPdfContent(document As PdfDocument) As Task
    Dim data = document.BinaryData
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}"
End Function

Diese Methoden demonstrieren das Laden von PDF-Dateien von URLs über HTTPS, die Konvertierung von HTML-Inhalten in PDF und die Anzeige des resultierenden PDF-Inhalts. Die LoadFromUrl Methode ruft PDF-Dokumente von entfernten Speicherorten ab, während LoadFromHtmlContent zeigt, wie HTML dynamisch in PDF konvertiert werden kann . Dies bietet Flexibilität bei der Inhaltsbeschaffung Ihrer Blazor-PDF-Viewer-Komponente. Die Chrome-Rendering-Engine gewährleistet eine genaue Konvertierung.

Weitere Quellenoptionen umfassen:

• Azure Blob Storage für die cloudbasierte PDF-Speicherung
• Datenbank-Streams für sicheren Dokumentenzugriff
• Markdown-Dateien dynamisch in PDF konvertiert
• Mit XSLT transformierte XML-Dokumente
• RTF-Dateien werden auf Anfrage konvertiert

Erwägen Sie die Konvertierung von DOCX in PDF für Microsoft Word-Dokumente und von Bildern in PDF für Fotoarchive.

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

Imports System
Imports System.Net.Http
Imports System.Threading.Tasks

Private Async Function LoadFromUrlWithRetry(url As String, Optional maxRetries As Integer = 3) As Task(Of PdfDocument)
    For i As Integer = 0 To maxRetries - 1
        Try
            Using client As New HttpClient()
                client.Timeout = TimeSpan.FromSeconds(30)

                Dim response = Await client.GetAsync(url)
                response.EnsureSuccessStatusCode()

                Dim stream = Await response.Content.ReadAsStreamAsync()
                Return New PdfDocument(stream)
            End Using
        Catch ex As HttpRequestException When i < maxRetries - 1
            Await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))) ' Exponential backoff
        End Try
    Next
    Throw New Exception($"Failed to load PDF from {url} after {maxRetries} attempts")
End Function

Wie füge ich meinem PDF-Viewer interaktive Funktionen hinzu?

Verbessern Sie Ihren PDF-Viewer mit interaktiven Funktionen:

@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);
    }
}

Imports System.Threading.Tasks

Private currentPage As Integer = 1
Private totalPages As Integer
Private rotationClass As String = ""

Private Async Function NavigateToPage(page As Integer) As Task
    currentPage = page
    Await JSRuntime.InvokeVoidAsync("navigateTo", page)
End Function

Private Sub RotateCounterclockwise()
    ' Counterclockwise switch orientation
    rotationClass = "rotate-270"
End Sub

Private Async Function PrintPdf() As Task
    Await JSRuntime.InvokeVoidAsync("printDocument", documentId)
End Function

Private Async Function DownloadPdf() As Task
    Dim fileName As String = "document.pdf"
    Await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, fileName)
End Function

Dieser Code fügt die Navigation zwischen PDF-Seiten , die Rotationsfunktionalität (einschließlich Drehung gegen den Uhrzeigersinn) und die Möglichkeit zum Drucken von PDFs hinzu. Die Download-Funktion ermöglicht es Benutzern, PDF-Dateien lokal zu speichern . Diese Funktionen verwandeln Ihren einfachen PDF-Viewer in einen effektiven Viewer mit integrierter Symbolleiste, die wichtige Funktionen für Benutzer bietet, die mit PDF-Dokumenten arbeiten. Erwägen Sie , Seitenzahlen und Lesezeichen zur Navigation hinzuzufügen.

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

Private Async Function RenderSpecificPage(pageNumber As Integer) As Task(Of String)
    Dim pdfDocument = PdfDocument.FromFile("document.pdf")
    ' Extract single page for faster rendering
    Dim singlePagePdf = pdfDocument.CopyPage(pageNumber - 1)

    ' Convert to image for preview
    Dim imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150)

    Return Convert.ToBase64String(imageData(0))
End Function

Wie gehe ich mit dem Ausfüllen und Kommentieren von PDF-Formularen um?

Für PDF-Dokumente mit Formularfeldern und Anmerkungen bietet IronPDF zuverlässige 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);
}

Option Strict On



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
    ' Enable form filling in viewer
    Dim modifiedPdf = pdfDocument.BinaryData
    Await DisplayPdfContent(pdfDocument)
End Function

Dies ermöglicht das Ausfüllen von Formularen innerhalb Ihrer Blazor PDF-Viewer-Komponente, sodass Benutzer direkt im Browser mit den 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. Die Unterstützung umfasst digitale Signaturen und Textanmerkungen .

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

Private Async Function SaveFormData() As Task
    Dim pdfWithFormData = PdfDocument.FromFile("filled-form.pdf")

    ' Extract form data
    Dim formData As New Dictionary(Of String, String)()
    For Each field In pdfWithFormData.Form.Fields
        formData(field.Name) = field.Value
    Next

    ' Save to database or JSON
    Dim json = System.Text.Json.JsonSerializer.Serialize(formData)
    Await File.WriteAllTextAsync("form-data.json", json)

    ' Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten()
    pdfWithFormData.SaveAs("form-submission.pdf")
End Function

Wie kann ich die Leistungbei großen PDFs verbessern?

Um eine hohe Leistungsfähigkeit bei der Anzeige von PDFs, insbesondere von großen PDF-Dateien, zu gewährleisten:

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);
    }
}

Private Async Function LoadLargePdf() As Task
    Const chunkSize As Integer = 1024 * 1024 ' 1MB chunks
    Dim pdfPath As String = "largefile.pdf"
    Using 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
        ' Process chunks for display
        Await ProcessPdfChunks(chunks)
    End Using
End Function

Bei diesem Verfahren werden große PDF-Dateien in Blöcken geladen, wodurch Speicherprobleme vermieden und eine reibungslose Performance auch bei umfangreichen PDF-Dokumenten gewährleistet wird. Es ist besonders nützlich beim Umgang mit PDF-Dateien auf Mobilgeräten oder Systemen mit begrenzten Ressourcen. Erwägen Sie die Implementierung von Strategien zur Vermeidung von Speicherlecks .

Weitere Optimierungsstrategien umfassen:

• Linearisierung für schnelle Webansicht
• Komprimierung zur Reduzierung der Dateigrößen
• Parallele Verarbeitung mehrerer PDFs
• Zwischenspeichermechanismen für häufig aufgerufene Dokumente
• Speicherstromverwaltung für effiziente Ressourcennutzung

Für Docker-Umgebungen sollte die Containerkonfiguration verbessert werden. In AWS Lambda ist eine sorgfältige Speicherverwaltung unerlässlich.

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

Private Async Function CheckMemoryBeforeLoad(fileSize As Long) As Task(Of Boolean)
    Dim memoryInfo = GC.GetTotalMemory(False)
    Dim availableMemory = GC.GetTotalMemory(True)

    ' Conservative estimate: file size * 3 for processing overhead
    Dim requiredMemory = fileSize * 3

    If requiredMemory > availableMemory * 0.8 Then ' 80% threshold
        ' Trigger garbage collection
        GC.Collect()
        GC.WaitForPendingFinalizers()
        GC.Collect()

        ' Re-check after cleanup
        availableMemory = GC.GetTotalMemory(True)
        Return requiredMemory <= availableMemory * 0.8
    End If

    Return True
End Function

Wie implementiere ich Sicherheitsmaßnahmen für passwortgeschützte PDFs?

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);
    }
}

Private Async Function LoadSecurePdf(password As String) As Task
    Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)
    If pdfDocument IsNot Nothing Then
        Dim headers = New Dictionary(Of String, String) From {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        }
        Await DisplayPdfContent(pdfDocument)
    End If
End Function

Dieser Code demonstriert das Laden passwortgeschützter PDF-Dokumente unter Beibehaltung der Sicherheit durch korrekte Header-Konfiguration. Erwägen Sie digitale Signaturen zur Verbesserung der Authentifizierung.

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

Private Sub ConfigureSecurityHeaders(response As HttpResponse)
    response.Headers.Add("X-Content-Type-Options", "nosniff")
    response.Headers.Add("X-Frame-Options", "DENY")
    response.Headers.Add("Content-Security-Policy", 
                         "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'")
    response.Headers.Add("Referrer-Policy", "no-referrer")
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()")
End Sub

Was sind die wichtigsten Erkenntnisse zum Thema Blazor PDF-Anzeige?

Die Implementierung eines Blazor PDF-Viewers mit IronPDF bietet Entwicklern eine Komplettlösung für die Anzeige von PDFs in Webanwendungen. Von der einfachen Anzeige bis hin zu erweiterten Funktionen wie Formularausfüllung und Anmerkungen bietet die PDF-Viewer-Komponente von IronPDF die Funktionalität, die für professionelle Anwendungen benötigt wird.

Die gezeigten Beispiele veranschaulichen, wie man einen zuverlässigen Blazor PDF-Viewer erstellt, der verschiedene PDF-Quellen verarbeiten kann, interaktive Funktionen bietet und eine hohe Leistung beibehält. Egal, ob Sie einen einfachen Dokumentenbetrachter oder ein komplexes Dokumentenmanagementsystem entwickeln, die Integration von IronPDF mit Blazor Server-Anwendungen macht die Implementierung professioneller PDF-Anzeigefunktionen einfach. Die Chrome-Rendering-Engine gewährleistet konsistente Ergebnisse auf allen Plattformen.

Zu den wichtigsten Vorteilen der Verwendung von IronPDF für die PDF-Anzeige in Blazor gehören:

• Plattformübergreifende Kompatibilität mit konsistenter Darstellung
• Erweiterte Sicherheitsfunktionen für sensible Dokumente
• Leistungsoptimierung für große Dateien
• Umfassende Formularverarbeitungsfunktionen
• Reibungslose Integration mit bestehenden .NET-Anwendungen

Für bestimmte Einsatzszenarien unterstützt IronPDF Azure , AWS , Docker und traditionelle Windows- Umgebungen. Die Bibliothek lässt sich auch in F#- und VB.NET -Anwendungen integrieren.

Bereit, Ihren eigenen PDF-Viewer zu implementieren? Starten Sie noch heute Ihre kostenlose Testversion von IronPDF und erhalten Sie Zugriff auf die vollständige Dokumentation , Demo-Anwendungen und Entwicklerunterstützung , um effektive PDF-Anzeigeerlebnisse in Ihren Blazor-Anwendungen zu schaffen. Die Schnellstartanleitung hilft Ihnen, sofort loszulegen, während Codebeispiele praktische Implementierungen veranschaulichen.