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. Die Chrome-Rendering-Engine von IronPDF gewährleistet pixelgenaue Darstellung bei der Konvertierung von Webinhalten in PDF.

Dieser hybride Ansatz ermöglicht es Ihnen, die überlegenen PDF-Erstellungsfunktionen von IronPDF zu nutzen und gleichzeitig die eleganten UI-Komponenten von Telerik für die Anzeige zu verwenden. Es ist besonders nützlich, wenn Sie ältere Webprojekte modernisieren oder neue Blazor-PDF-Lösungen erstellen müssen, die sowohl Generierungs- als auch Anzeigefunktionen erfordern. Die Einfachheit macht es zu einer unkomplizierten Wahl. Sie können außerdem Kopf- und Fußzeilen hinzufügen , Wasserzeichen einfügen und benutzerdefinierte Ränder für Ihre generierten PDFs festlegen, bevor Sie diese anzeigen.

Wie kann man 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. Sie können der detaillierten Installationsanleitung folgen oder den NuGet-Paketmanager verwenden:

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

Diese Konfiguration aktiviert sowohl die Telerik UI for Blazor-Komponenten als auch die Rendering-Funktionen von IronPDF in Ihrer Anwendung. DevCraft Suite-Nutzer, die bereits mit Telerik vertraut sind, werden diese Integration als reibungslos empfinden. Das Ergebnis ist ein vollständig konfiguriertes System. Für komplexere Szenarien empfiehlt sich die Verwendung von asynchronen PDF-Generierungsoptionen oder benutzerdefinierten Protokollierungskonfigurationen .

Wie erstellt man 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. Sie können auch HTML-Zeichenketten in PDF konvertieren , HTML-Dateien rendern oder sogar Markdown in PDF konvertieren :

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

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. Sie können auch Bilder zu PDFs hinzufügen , Bilder aus Azure Blob Storage einbetten oder Bilder direkt in PDF konvertieren .

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. Für fortgeschrittene Szenarien sollten Sie die Steuerung von Seitenumbrüchen , die Viewport-Konfiguration oder die Einstellungen für die Basis-URL zur korrekten Ladung von Assets untersuchen.

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

Sobald Sie Ihr PDF mit IronPDF erstellt haben, ist die Anzeige mit dem Telerik Blazor PDF-Viewer ganz einfach. Sie können auch die PDF-Anzeige in MAUI-Anwendungen für plattformübergreifende Szenarien erkunden:

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

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. Das Attribut Data liefert den anzuzeigenden PDF-Wert. Zur Verbesserung der Funktionalität empfiehlt sich die Implementierung von Textextraktion , PDF-Suchfunktionen oder Annotationsfunktionen .

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. Sie können PDFs auch in verschiedene Formate exportieren oder PDFs in Bilder rastern, um zusätzliche Flexibilität zu erreichen.

Wie funktionieren diese Komponenten zusammen?

Durch die Integration entsteht ein effizienter Arbeitsablauf, bei dem IronPDF die aufwendige PDF-Erstellung übernimmt, während Telerik für ein optimales Anzeigeerlebnis sorgt. Hier ist ein vollständiges Beispiel, das die Erstellung von PDFs aus HTML mit dynamischem Inhalt veranschaulicht:

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

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 eine professionelle PDF-Erstellung mit einer professionellen Anzeigeoberfläche. Dieser Ansatz unterstützt auch fortgeschrittene Funktionen wie PDF/A-Konformität , PDF/UA-Barrierefreiheit und Metadatenverwaltung .

Dieser Ansatz bietet 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. Die Lösung eignet sich gut für einfache HTML-zu-PDF-Konvertierungen bis hin zu komplexen Berichtgenerierungsszenarien .

Was sind die nächsten Schritte für die Umsetzung?

Die Entwicklung eines Telerik Blazor PDF-Viewers mit IronPDF bietet Ihnen das Beste aus beiden Welten: effektive PDF-Generierung und ein erstklassiges Anzeigeerlebnis. Diese Kombination hilft Ihnen beim Aufbau kompletter PDF-Lösungen, mit denen Sie ältere Webprojekte modernisieren und gleichzeitig die Anforderungen moderner Anwendungen erfüllen können. Egal ob Sie mit Windows- , Linux- oder macOS- Umgebungen arbeiten, beide Bibliotheken bieten plattformübergreifende Unterstützung.

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. Von der einfachen Rechnungserstellung bis hin zu komplexen XML-zu-PDF-Konvertierungen bewältigt die kombinierte Lösung unterschiedlichste Anforderungen effektiv.

Sind Sie bereit, diese Lösung umzusetzen? Starten Sie Ihre kostenlose IronPDF-Testversion und entdecken Sie, wie es Ihre Telerik UI for Blazor-Projekte verbessert. 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.