Erstellung eines Telerik Blazor PDF-Viewers mit IronPDF

Warum sollte man Telerik UI mit IronPDF kombinieren?

Der Telerik Blazor PDF-Viewer zeichnet sich durch seine hervorragende Darstellung von PDFs aus und bietet Funktionen wie Textsuche, Zoomsteuerung und eine anpassbare Symbolleiste. Wenn Sie jedoch PDF-Dateien dynamisch aus HTML, URLs oder Razor-Ansichten generieren müssen, bietet IronPDF die Chrome-basierte Rendering-Engine, die Telerik UI nicht in seinen Dokumentenverarbeitungsbibliotheken enthält.

Dieser hybride Ansatz ermöglicht es Ihnen, die überlegenen PDF-Erstellungsfunktionen von IronPDF zu nutzen und gleichzeitig die ausgereiften UI-Komponenten von Telerik für die Anzeige zu verwenden. Es ist besonders nützlich, wenn Sie ältere Webprojekte modernisieren oder neue Blazor-PDF-Dateilösungen erstellen müssen, die sowohl Generierungs- als auch Anzeigefunktionen erfordern. Zudem macht die Einfachheit die Entscheidung leicht.

Wie kann ich ein Blazor-Projekt mit beiden Bibliotheken einrichten?

Das Einrichten beider Bibliotheken in Ihrem Blazor-Projekt ist unkompliziert. Installieren Sie zunächst die benötigten Pakete über NuGet:

Install-Package IronPDF Telerik.UI.for.Blazor

Konfigurieren Sie nach der Installation Ihre Program.cs , um Dienste hinzuzufügen:

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

IRON VB CONVERTER ERROR developers@ironsoftware.com

Diese Konfiguration aktiviert sowohl die Telerik UI for Blazor-Komponenten als auch die Rendering-Funktionen von IronPDF in Ihrer Anwendung. Für DevCraft-Suite-Nutzer, die bereits mit Telerik vertraut sind, ist diese Integration nahtlos. Das Ergebnis ist ein vollständig konfiguriertes System.

Wie erstelle ich mit IronPDF PDF-Dokumente zur Anzeige?

IronPDF wandelt HTML-Inhalte in PDF-Dateien um, die vom Telerik PDF-Viewer angezeigt werden können. Hier erfahren Sie, wie Sie aus HTML eine PDF-Datei erstellen und diese für die Anzeige vorbereiten:

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Code generiert ein PDF-Dokument, das zur Anzeige bereit ist. Die Rendering-Engine von IronPDF sorgt dafür, dass Ihre HTML-, CSS- und sogar JavaScript-Inhalte perfekt gerendert werden und die gesamte Formatierung erhalten bleibt, wenn Benutzer sie über die PDF-Viewer-Komponente anzeigen.

Die ChromePdfRenderer Klasse bietet umfangreiche Anpassungsmöglichkeiten. Sie können Seitengröße, Ränder, Kopf- und Fußzeilen festlegen und sogar benutzerdefiniertes CSS für Druckmedien definieren – Funktionen, die die Anzeigemöglichkeiten von Telerik perfekt ergänzen. Auf diese Weise können Sie auch Daten an den Renderer übermitteln.

Wie kann ich die PDF-Viewer-Blazor-Komponente von Telerik integrieren?

Nachdem Sie Ihre PDF-Datei mit IronPDF erstellt haben, ist die Anzeige mit dem Telerik Blazor PDF-Viewer ganz einfach:

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

IRON VB CONVERTER ERROR developers@ironsoftware.com

Diese Komponentenkonfiguration bietet wichtige Werkzeuge für die Interaktion mit PDFs. Die Symbolleiste enthält Navigationsschaltflächen, Zoomstufenregler und eine Suchfunktion. Sie können je nach Ihren Anwendungsanforderungen anpassen, welche Werkzeuge angezeigt werden. Der Verweis auf die Daten erfolgt über das Data-Attribut, das den PDF-Wert bereitstellt.

Der Telerik UI for Blazor Viewer kümmert sich automatisch um die Browserkompatibilität und funktioniert ohne Plugins auf allen modernen Browsern. Für Desktop-Anwendungen, die .NET MAUI verwenden, unterstützen beide Bibliotheken die plattformübergreifende Bereitstellung, sodass Sie konsistente PDF-Erlebnisse auf Web- und Desktop-Plattformen schaffen können. Diese Funktionalität ist im Viewer nativ integriert.

Wie funktionieren diese Komponenten zusammen?

Durch die Integration entsteht ein leistungsstarker Workflow, bei dem IronPDF die aufwendige PDF-Erstellung übernimmt, während Telerik für ein optimales Anzeigeerlebnis sorgt. Hier ist ein vollständiges Beispiel:

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build your HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build your HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Warum dieser Hybridansatz?

Während Telerik UI für Blazor hervorragende Anzeigefunktionen bietet, kann es in puncto PDF-Generierungsleistung nicht mit IronPDF mithalten. Die Chrome-basierte Engine von IronPDF rendert komplexe Layouts, Formulare und formatierte Inhalte, mit denen einfachere Dokumentenverarbeitungsbibliotheken möglicherweise Schwierigkeiten haben. Durch die Kombination beider erhalten Sie PDF-Erstellung auf Unternehmensebene mit einer professionellen Anzeigeoberfläche.

Dieser Ansatz bietet auch Entwicklern Flexibilität, die verschiedene Anzeigeoptionen ausprobieren möchten. Sie könnten den Telerik-Viewer durch eine einfachere iFrame-Anzeige ersetzen oder benutzerdefinierte Anzeigekomponenten entwickeln und dabei die Generierungsfunktionen von IronPDF beibehalten.

Abschluss

Die Entwicklung eines Telerik Blazor PDF-Viewers mit IronPDF bietet Ihnen das Beste aus beiden Welten: leistungsstarke PDF-Generierung und ein erstklassiges Anzeigeerlebnis. Diese Kombination hilft Entwicklern dabei, umfassende PDF-Lösungen zu erstellen, die ältere Webprojekte modernisieren und den Anforderungen moderner Anwendungen gerecht werden können.

Egal ob Sie Dokumentenmanagementsysteme, Reporting-Tools oder eine beliebige Blazor-Anwendung mit PDF-Funktionalität entwickeln – diese Integration bietet die Funktionalität und Benutzerfreundlichkeit, die Ihre Projekte erfordern.

Sind Sie bereit, diese Lösung umzusetzen? Starten Sie Ihre kostenlose IronPDF-Testversion und entdecken Sie, wie es Ihre Telerik UI for Blazor-Projekte optimiert. Für den Einsatz in der Produktion empfehlen wir Ihnen, sich unsere Lizenzoptionen anzusehen, um die passende Lösung für Ihre Bedürfnisse zu finden.