Ikona wiadomości
Przejdź do treści stopki
  1. IronPDF
  2. Blog IronPDF
  3. Korzystanie z IronPDF
  4. Przeglądarka PDF Blazor
KORZYSTANIE Z IRONPDF

Jak zbudować przeglądarkę plików PDF dla Blazora przy użyciu IronPDF

Curtis Chau
Curtis Chau
Zaktualizowano:

Przeglądarka PDF Blazor renderuje dokumenty PDF w trybie inline, konwertując je na URI danych base64 i ładując wynik w elemencie <iframe>. Funkcja ChromePdfRenderer firmy IronPDF konwertuje ciągi znaków HTML, aktywne adresy URL lub treści dynamiczne na bajty PDF w ramach jednego wywołania asynchronicznego, zapewniając aplikacjom Blazor Server i Blazor WebAssembly pełną funkcjonalność generowania i wyświetlania plików PDF bez konieczności stosowania zewnętrznych wtyczek do przeglądania.

Aplikacje biznesowe często muszą wyświetlać faktury, umowy i raporty bez przekierowywania użytkowników do osobnej karty lub polegania na obsłudze plików PDF przez przeglądarkę, która różni się w zależności od urządzenia. Model komponentów Blazora ułatwia generowanie pliku PDF na serwerze, jego kodowanie i przesyłanie strumieniowe do dowolnego komponentu strony, pod warunkiem, że biblioteka niezawodnie obsługuje konwersję.

Niniejszy przewodnik obejmuje instalację, renderowanie oparte na adresach URL i HTML, dostosowywanie za pomocą nagłówków i stopek, pobieranie w przeglądarce przy użyciu interoperacyjności JavaScript, porównanie podejść Blazor Server i Blazor WebAssembly oraz cztery rozszerzone operacje: scalanie, adnotacje, ochronę hasłem i wyświetlanie plików przesłanych przez użytkownika. Dla każdej techniki podano komponenty Razor oraz odpowiadające im przykłady w języku C# na najwyższym poziomie.

Rozpocznij bezpłatny okres próbny IronPDF, aby śledzić przykłady zawarte w tym przewodniku.

Jak rozpocząć pracę z IronPDF w projekcie Blazor?

Aby rozpocząć, należy zainstalować pakiet NuGet i dodać klucz licencyjny do Program.cs. Zainstaluj IronPDF z konsoli menedżera pakietów:

Install-Package IronPdf

Alternatywnie, wyszukaj "IronPDF" w interfejsie użytkownika menedżera pakietów NuGet i wybierz najnowszą wersję.

NuGet Zainstaluj za pomocą NuGet

PM >  Install-Package IronPdf

Sprawdź IronPDF na NuGet dla szybkiej instalacji. Z ponad 10 milionami pobrań, przekształca rozwój PDF z C#. Możesz również pobrać DLL lub instalator Windows.

Po instalacji dodaj swój klucz licencyjny do Program.cs przed rozpoczęciem jakichkolwiek operacji na plikach PDF:

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"
$vbLabelText   $csharpLabel

IronPDF jest kompatybilny z .NET 10, .NET 9, .NET 8, .NET 6 oraz .NET Framework 4.6.2 i nowszymi wersjami. W celu rozwoju i testowania biblioteka działa bez klucza licencyjnego, ale umieszcza znak wodny na generowanych plikach PDF. Bezpłatna licencja próbna usuwa znak wodny na czas oceny.

IronPDF obsługuje zarówno projekty Blazor Server, jak i Blazor WebAssembly. W Blazor Server silnik renderujący działa bezpośrednio na serwerze. W Blazor WebAssembly generowanie plików PDF wymaga punktu końcowego API po stronie serwera; W sekcji poświęconej architekturze, znajdującej się w dalszej części niniejszego przewodnika, wyjaśniono oba podejścia.

Jak wyświetlić plik PDF z adresu URL w Blazorze?

Najprostszym sposobem na stworzenie przeglądarki PDF w Blazorze jest konwersja adresu URL na plik PDF i wyświetlenie go w <iframe>. Funkcja ChromePdfRenderer firmy IronPDF pobiera stronę internetową i konwertuje ją do formatu PDF przy użyciu tego samego silnika renderującego, który napędza przeglądarkę Google Chrome, wiernie zachowując CSS, kod JavaScript i układ strony.

Podejście oparte na komponentach Razor

Poniższy komponent Razor konwertuje adres URL na plik PDF i wyświetla go w tekście. Metoda GeneratePdf działa na serwerze w aplikacji Blazor Server, dzięki czemu dostępny jest pełny silnik renderujący Chrome:

@page "/pdfviewer"
@using IronPdf

<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

Przykład w języku C# na najwyższym poziomie

W przypadku usług działających w tle, aplikacji konsolowych lub punktów końcowych API po stronie serwera ta sama konwersja wykorzystuje identyczne wywołania API poza kontekstem jakiegokolwiek komponentu:

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
' Fetch and convert the target URL to a PDF document
Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://ironpdf.com")

' Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf")
Dim pdfBytes As Byte() = pdf.BinaryData
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync pobiera stronę, wykonuje cały kod JavaScript, stosuje CSS i zwraca obiekt PdfDocument zawierający wyrenderowany wynik. Właściwość BinaryData udostępnia surowe bajty pliku PDF do przechowywania, strumieniowania lub wyświetlania. <iframe> wyświetla wynik z wbudowanym paskiem narzędzi przeglądarki do Zoomu, nawigacji i drukowania.

Jak stworzyć przeglądarkę plików PDF w Blazorze przy użyciu IronPDF: Rysunek 1 – Wynik działania przeglądarki plików PDF

Jak dostosować generowanie plików PDF?

IronPDF zapewnia kontrolę nad wynikami poprzez klasę ChromePdfRenderOptions. Możesz ustawić rozmiar papieru, dostosować marginesy oraz dodać nagłówki i stopki tekstowe lub HTML do każdej strony. Przewodnik po opcjach renderowania zawiera pełną listę dostępnych właściwości.

Podejście oparte na komponentach Razor

Poniższy komponent konfiguruje papier formatu A4 z marginesami oraz dodaje tekst nagłówka i stopki do każdej strony. Przypisz RenderingOptions przed wywołaniem dowolnej metody renderowania, aby zastosować je globalnie do instancji renderera:

@page "/pdfcustom"
@using IronPdf

<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Przykład w języku C# na najwyższym poziomie

Te same opcje mają zastosowanie w każdym kontekście .NET. Ten wzorzec sprawdza się dobrze w ramach minimalnego interfejsu API .NET Core lub generatora raportów zaplanowanych:

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer With {
    .RenderingOptions = New ChromePdfRenderOptions With {
        .PaperSize = PdfPaperSize.A4,
        .MarginTop = 25,
        .MarginBottom = 25,
        .TextHeader = New TextHeaderFooter With {.CenterText = "Report - {date}", .FontSize = 12},
        .TextFooter = New TextHeaderFooter With {.RightText = "Page {page} of {total-pages}", .FontSize = 10}
    }
}

Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://example.com/report")
pdf.SaveAs("customized-report.pdf")
$vbLabelText   $csharpLabel

Zmienne szablonu, w tym {page}, {total-pages} i {date}, są zastępowane rzeczywistymi wartościami w momencie renderowania. W przypadku złożonych układów z elementami brandingowymi należy używać właściwości HtmlHeader i HtmlFooter zamiast TextHeader i TextFooter. Przewodnik dotyczący nagłówków i stopek zawiera kompletne przykłady obu podejść.

Jak stworzyć przeglądarkę plików PDF dla Blazora przy użyciu IronPDF: Rysunek 2 – Dostosowany plik PDF otwarty w przeglądarce PDF

Jaki jest najlepszy sposób na umożliwienie pobierania plików PDF?

Wyświetlanie plików PDF w <iframe> umożliwia przeglądanie, ale użytkownicy często muszą pobrać plik. Interoperacyjność JavaScript uruchamia pobieranie w przeglądarce ze strumienia bajtów .NET. Aby uzyskać dodatkowe wzorce pobierania i eksportowania, zapoznaj się z przewodnikiem dotyczącym eksportowania i zapisywania plików PDF.

Podejście oparte na komponentach Razor

Wstaw IJSRuntime do komponentu i wywołaj funkcję pomocniczą JavaScript, aby zainicjować pobieranie. DotNetStreamReference przesyła strumieniowo bajty pliku PDF bez ładowania całego pliku do pamięci JavaScript za jednym razem:

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime

<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>

@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

Dodaj tę funkcję JavaScript do pliku _Host.cshtml lub App.razor, zgodnie z opisem w dokumentacji Microsoftu dotyczącej współdziałania Blazor z JavaScript:

window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
JAVASCRIPT

Przykład w języku C# na najwyższym poziomie

W punkcie końcowym API po stronie serwera zwróć bajty pliku PDF bezpośrednio za pomocą Results.File. Przeglądarka odbiera plik z poprawnymi nagłówkami Content-Disposition i automatycznie uruchamia pobieranie:

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
Imports IronPdf

' ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", Async Function()
    Dim renderer As New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>")
    ' Return with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf")
End Function)
$vbLabelText   $csharpLabel

Jak mogę generować pliki PDF z komponentów Razor?

Generowanie plików PDF z HTML zapewnia pełną kontrolę nad układem, powiązaniem danych i stylizacją. Takie podejście sprawdza się w przypadku faktur, raportów i wszelkich dokumentów tworzonych na podstawie danych z aplikacji w czasie rzeczywistym. Aby zapoznać się z bardziej zaawansowanymi technikami renderowania, zapoznaj się z przewodnikiem po konwersji HTML do PDF.

Podejście oparte na komponentach Razor

Poniższy komponent tworzy ciąg HTML faktury na podstawie danych C# i konwertuje go do formatu PDF. ChromePdfRenderer traktuje ciąg HTML tak samo jak stronę internetową, stosując wszystkie style CSS i renderując go za pomocą silnika Chrome:

@page "/invoicedemo"
@using IronPdf

<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2025-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td><td>1</td><td>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Przykład w języku C# na najwyższym poziomie

To samo podejście oparte na ciągach HTML działa w każdym kontekście .NET, w tym w aplikacjach konsolowych, usługach działających w tle i punktach końcowych API. Interpolacja ciągów znaków w języku C# lub biblioteka szablonów wstawia dane dynamiczne przed przekazaniem ciągu znaków do renderera:

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
Imports IronPdf

Dim html As String = "
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    "

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync(html)
pdf.SaveAs("invoice.pdf")
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync akceptuje dowolny prawidłowy ciąg znaków HTML, w tym wbudowany CSS i osadzony JavaScript. Implementacja automatycznie obsługuje układ, renderowanie czcionek i podziały stron.

Jak stworzyć przeglądarkę plików PDF dla Blazora przy użyciu IronPDF: Rysunek 3 – Plik PDF z fakturą w przeglądarce

Czym przeglądarka plików PDF Blazor Server różni się od Blazor WebAssembly?

Model hostingu określa, gdzie odbywa się generowanie plików PDF i w jaki sposób dane trafiają do przeglądarki. Zrozumienie tej różnicy pozwala uniknąć typowego błędu architektonicznego podczas tworzenia przeglądarek PDF dla Blazora.

Blazor Server wykonuje cały kod C# na serwerze. ChromePdfRenderer działa po stronie serwera, a uzyskane bajty są przesyłane do przeglądarki przez istniejące połączenie SignalR. Jest to najprostsza ścieżka integracji, niewymagająca żadnych dodatkowych punktów końcowych API ani wywołań sieciowych poza tymi, które zostały przedstawione we wcześniejszych sekcjach.

Blazor WebAssembly uruchamia C# w piaskownicy przeglądarki przy użyciu WASM. Silnik renderujący IronPDF opiera się na natywnych plikach binarnych, które nie mogą działać w piaskownicy przeglądarki, więc ChromePdfRenderer nie jest bezpośrednio dostępny w projekcie WASM. Właściwym podejściem jest wywołanie punktu końcowego API po stronie serwera, który generuje plik PDF i zwraca bajty w odpowiedzi.

Konfiguracja interfejsu API do generowania plików PDF dla Blazor WebAssembly

Na serwerze zdefiniuj minimalny punkt końcowy API, który generuje i zwraca plik PDF:

// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
Imports IronPdf

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"

app.MapGet("/api/pdf/report", Async Function()
    Dim renderer = New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>")
    ' Return PDF bytes with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "report.pdf")
End Function)
$vbLabelText   $csharpLabel

W kliencie WASM wstaw HttpClient i wywołaj punkt końcowy API. Szablon projektu hostowanego Blazor WASM wstępnie konfiguruje HttpClient tak, aby wskazywał adres bazowy serwera:

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Ten wzorzec przenosi całą ciężką pracę związaną z renderowaniem na serwer, podczas gdy klient WASM zajmuje się wyłącznie wyświetlaniem. W przypadku zastosowań produkcyjnych należy dodać uwierzytelnianie do punktu końcowego API i ograniczyć zakres generowanej treści PDF do danych uwierzytelnionego użytkownika.

Jakie inne operacje na plikach PDF mogę wykonać?

API IronPDF wykracza daleko poza podstawowe funkcje przeglądania. Poniższe sekcje obejmują cztery operacje powszechnie potrzebne w przepływach pracy z dokumentami w Blazor: scalanie wielu dokumentów, dodawanie adnotacji, stosowanie ochrony hasłem oraz wyświetlanie plików przesłanych przez użytkowników.

Jak połączyć wiele dokumentów PDF?

Funkcja scalania łączy wiele instancji PdfDocument w jeden plik, co jest przydatne do tworzenia sekcji raportów, dołączania załączników lub łączenia plików wybranych przez użytkownika. Przewodnik dotyczący scalania i dzielenia plików PDF obejmuje operacje wstawiania i dzielenia na poziomie stron.

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()

' Generate two separate sections as individual PDF documents
Dim section1 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>")
Dim section2 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>")

' Merge into a single document preserving all pages
Dim merged = PdfDocument.Merge(section1, section2)
merged.SaveAs("combined-report.pdf")
$vbLabelText   $csharpLabel

Aby wyświetlić scalony dokument w komponencie Blazor, należy przekazać merged.BinaryData do wzorca URI danych base64 z poprzednich sekcji. Połączony obiekt PdfDocument akceptuje również dalsze operacje (znak wodny, ustawienia zabezpieczeń lub dodatkowe dołączanie stron) przed zakodowaniem w celu wyświetlenia.

Jak dodać adnotacje do pliku PDF?

Adnotacje pozwalają na dołączanie notatek i komentarzy recenzenta do określonych miejsc na stronie bez zmiany treści dokumentu. IronPDF obsługuje adnotacje tekstowe, pola tekstowe oraz inne typy znaczników. Pełną listę właściwości adnotacji można znaleźć w przewodniku po adnotacjach.

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
Imports IronPdf
Imports IronPdf.Annotations

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>")

' Add a text annotation to page 0 at position (50, 650)
Dim annotation As New TextAnnotation(pageIndex:=0) With {
    .Title = "Reviewer Note",
    .Contents = "Please confirm clause 3 before signing.",
    .X = 50,
    .Y = 650,
    .Width = 200,
    .Height = 50,
    .Printable = False,
    .OpenByDefault = True
}

pdf.Annotations.Add(annotation)
pdf.SaveAs("annotated-contract.pdf")
$vbLabelText   $csharpLabel

Adnotacje są zachowane po otwarciu pliku PDF w dowolnej standardowej przeglądarce, w tym w przeglądarce internetowej <iframe>. W przypadku aplikacji Blazor uruchom logikę adnotacji po stronie serwera i zwróć pdf.BinaryData do komponentu w celu wyświetlenia.

Jak zastosować ochronę hasłem do pliku PDF?

Ochrona hasłem ogranicza dostęp do poufnych dokumentów, takich jak raporty finansowe lub dokumentacja kadrowa. IronPDF obsługuje hasła użytkowników (wymagane do otwarcia dokumentu) oraz hasła właścicieli (wymagane do zmiany uprawnień). W przewodniku dotyczącym zabezpieczeń plików PDF wymieniono wszystkie dostępne flagi uprawnień.

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>")

' Set the password required to open the document
pdf.Password = "user-open-password"
' Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password"
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights
pdf.SecuritySettings.AllowUserCopyPasteContent = False

pdf.SaveAs("protected-report.pdf")
$vbLabelText   $csharpLabel

Pliki PDF chronione hasłem wyświetlają monit o hasło w przeglądarce <iframe>. Takie podejście sprawdza się w przypadku dokumentów udostępnianych do pobrania; W celu wyświetlania wbudowanego bez monitu hasło należy stosować wyłącznie do dokumentów zwracanych poprzez ścieżkę pobierania.

Jak wyświetlić pliki PDF przesłane przez użytkowników?

Wyświetlenie pliku PDF przesłanego przez użytkownika wymaga odczytania bajtów przychodzącego pliku i zakodowania ich jako URI danych. Poniższy komponent przesyłania plików wykorzystuje kontrolkę Blazora InputFile do przechwycenia pliku, a następnie wyświetla go bezpośrednio bez ponownego renderowania:

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

W przypadku przesłanych plików PDF, które przed wyświetleniem wymagają przetworzenia po stronie serwera, takiego jak dodanie znaku wodnego, wyodrębnienie stron lub ponowne szyfrowanie, należy najpierw załadować bajty do PdfDocument:

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
Dim pdf As New PdfDocument(bytes)
' Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}"
$vbLabelText   $csharpLabel

Pozwala to zachować tę samą strukturę komponentów, jednocześnie umożliwiając pełne wykorzystanie interfejsu API IronPDF w przesłanym pliku.

Jakie są moje kolejne kroki?

W niniejszym przewodniku omówiono kompletny proces tworzenia przeglądarki plików PDF dla Blazor z wykorzystaniem IronPDF: instalację w środowisku .NET 10, renderowanie adresów URL i kodu HTML, dostosowywanie wydruku za pomocą nagłówków i stopek, współdziałanie z JavaScriptem w celu pobierania plików w przeglądarce, różnice architektoniczne między Blazor Server a Blazor WebAssembly oraz cztery operacje na dokumentach: scalanie, adnotacje, ochrona hasłem i przesyłanie plików przez użytkowników.

Aby poszerzyć tę wiedzę, zapoznaj się z poniższymi zasobami:

Pobierz bezpłatną licencję próbną, aby usunąć znaki wodne i przetestować IronPDF w swojej aplikacji Blazor. IronPDF obsługuje projekty .NET 10, ASP.NET Core, Blazor Server oraz hostowane projekty Blazor WebAssembly bez konieczności dodatkowej konfiguracji. Dodatkowe wskazówki dotyczące integracji można znaleźć w oficjalnej dokumentacji Microsoftu dotyczącej Blazor.

Często Zadawane Pytania

Czym jest przeglądarka PDF Blazor?

Przeglądarka PDF Blazor to komponent, który wyświetla dokumenty PDF bezpośrednio w aplikacji Blazor Server lub WebAssembly. Zazwyczaj konwertuje bajty PDF na dane URI w formacie base64 i renderuje je wewnątrz elementu iframe, dając użytkownikom wbudowany pasek narzędzi do powiększania, nawigacji i drukowania.

Jak wyświetlić PDF w aplikacji Blazor Server?

Zainstaluj IronPDF poprzez NuGet, dodaj swój klucz licencyjny do Program.cs, a następnie użyj ChromePdfRenderer do generowania bajtów PDF z URL lub ciągu HTML. Zakoduj bajty jako dane URI w formacie base64 i przypisz je do atrybutu src iframe w komponencie Razor.

Czy IronPDF może działać w projekcie Blazor WebAssembly?

Silnik renderujący IronPDF wymaga natywnych bibliotek, które nie mogą działać w sandboxie WASM przeglądarki. Dla projektów Blazor WebAssembly stwórz punkt końcowy API ASP.NET Core po stronie serwera, który generuje PDF za pomocą IronPDF i zwraca bajty. Klient WASM wywołuje ten punkt końcowy za pomocą HttpClient i wyświetla rezultat.

Jak uruchomić pobieranie PDF w Blazor?

Dołącz IJSRuntime do swojego komponentu, wygeneruj bajty PDF z IronPDF, opakuj je w DotNetStreamReference i wywołaj funkcję JavaScript używając InvokeVoidAsync. Funkcja JavaScript tworzy URL Blob i klika element kotwicy, aby uruchomić pobieranie przez przeglądarkę.

Jakie są zalety korzystania z IronPDF do przeglądania plików PDF w Blazorze?

IronPDF używa silnika renderującego Chrome do dokładnego konwertowania wyjścia HTML, CSS i JavaScript do formatu PDF. Wspiera .NET 10, działa w architekturach Blazor Server i WebAssembly i oferuje jedno API do generowania PDF, łączenia, adnotacji, ochrony hasłem i przetwarzania przesłanych przez użytkownika plików.

Jak dodać nagłówki i stopki do wygenerowanego PDF w Blazor?

Ustaw właściwość RenderingOptions na ChromePdfRenderer przed wywołaniem metody renderowania. Użyj TextHeader i TextFooter dla prostych nagłówków i stopek z zmiennymi szablonowymi jak {page}, {total-pages} i {date}. Dla układów opartych na HTML użyj HtmlHeader i HtmlFooter.

Jak scalić wiele dokumentów PDF w Blazor?

Wygeneruj każdy dokument jako instancję PdfDocument używając ChromePdfRenderer, a następnie wywołaj PdfDocument.Merge(pdf1, pdf2), aby je połączyć. Przekaż BinaryData połączonego dokumentu do danych URI w formacie base64 twojego komponentu Blazor, aby wyświetlić wynik.

Czy mogę wyświetlić przesłany przez użytkownika PDF w Blazor bez zapisywania go na dysku?

Tak. Użyj komponentu InputFile Blazor, aby odczytać przesłany plik do MemoryStream, skonwertuj bajty na dane URI w formacie base64 i przypisz je do atrybutu src iframe. Nie jest wymagana operacja zapisu do systemu plików. Do przetwarzania po stronie serwera załaduj bajty do instancji PdfDocument przed zakodowaniem.

Jak zastosować ochronę hasłem do wygenerowanego PDF w Blazor?

Po wygenerowaniu PdfDocument, ustaw właściwość Password dla hasła do otwarcia przez użytkownika i użyj SecuritySettings.OwnerPassword dla hasła właściciela. Użyj SecuritySettings.AllowUserPrinting i AllowUserCopyPasteContent do kontrolowania uprawnień przed zapisaniem lub zakodowaniem dokumentu.

Czy IronPDF jest kompatybilny z .NET 10 dla projektów przeglądarki PDF Blazor?

Tak. IronPDF wspiera .NET 10, .NET 9, .NET 8, .NET 6 oraz .NET Framework 4.6.2 i nowsze. Nie jest wymagana specjalna konfiguracja, aby używać IronPDF w aplikacji Blazor skierowanej na .NET 10.

Curtis Chau
Curtis Chau
  Czat z zespołem inżynierów teraz
Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podrę...

Czytaj więcej

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie