Nie znalazłeś tego, czego szukałeś?
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 stworzyć podgląd i generator PDF w Blazor | IronPDF

Jak efektywnie porównywać dwa pliki PDF w C# z użyciem IronPDF

Curtis Chau
Curtis Chau
Zaktualizowano:

Podglądacz PDF Blazor renderuje dokumenty PDF inline, konwertując je na URI danych base64 i ładując wynik w elemencie <iframe>. Funkcja ChromePdfRenderer w IronPDF konwertuje ciągi HTML, aktywne adresy URL lub dynamiczną zawartość na bajty PDF w jednym asynchronicznym wywołaniu, dając aplikacjom Blazor Server i Blazor WebAssembly pełne możliwości generowania i wyświetlania PDF bez wtyczek przeglądarki.

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: scałanie, adnotacje, ochronę hasłem i wyświetlanie plików przesłanych przez użytkownika. Dla kazdej techniki dostarczone sa komponenty Razor oraz rownowazne przyklady w C# najwyzszego poziomu.

Bezpłatna próba IronPDF, aby śledzić przykłady zawarte w tym przewodniku.

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

Aby rozpocząć, instalacja pakietu NuGet oraz dodanie klucza licencyjnego do Program.cs są wymagane. Zainstaluj IronPDF z konsoli menedżera pakietów:

Install-Package IronPdf

Alternatywnie, wyszukaj 'IronPDF' w interfejsie uzytkownika Menedzera Pakietow NuGet i wybierz najnowsza wersje.

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 jakimikolwiek operacjami 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 podglądacza PDF Blazor jest konwersja adresu URL na PDF i wyświetlenie go w <iframe>. ChromePdfRenderer pobiera stronę internetową i konwertuje ją do formatu PDF, używając tego samego silnika renderującego Chrome, który napędza Google Chrome, wiernie zachowując CSS, wynik JavaScript i układ.

Podejście oparte na komponentach Razor

Poniższy komponent Razor konwertuje adres URL na PDF i wyświetla go inline. Metoda GeneratePdf uruchamia się na serwerze w aplikacji Blazor Server, więc 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 JavaScript, stosuje CSS i zwraca obiekt PdfDocument zawierający renderowany wynik. Właściwość BinaryData udostępnia surowe bajty PDF do przechowywania, strumieniowania lub wyświetlania. <iframe> wyświetla wynik z wbudowanym paskiem narzędzi przeglądarki do powiększania, nawigacji i drukowania.

Jak stworzyć podglądacz PDF Blazor za pomocą IronPDF: Rysunek 1 - Wyjście podglądacza PDF z adresu URL

Jak dostosować generowanie plików PDF?

IronPDF zapewnia kontrolę wyjścia przez 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 jakiejkolwiek 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. Dla złożonych markowych układów używaj 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ć podglądacz PDF Blazor za pomocą IronPDF: Rysunek 2 - Dostosowany PDF otwarty w podglądaczu PDF

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

Wyświetlanie PDF-ów w <iframe> obsługuje przeglądanie, ale użytkownicy często potrzebują pobrać plik. Interoperacyjność JavaScript wyzwala pobieranie z przeglądarki z ciągu 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

Wstrzyknij IJSRuntime do komponentu i wywołaj pomocniczą funkcję JavaScript, aby zainicjować pobieranie. DotNetStreamReference strumieniuje bajty PDF bez ładowania całego pliku do pamięci JavaScript naraz:

@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 swojego pliku _Host.cshtml lub App.razor, jak opisano w dokumentacji interoperacyjności JavaScript Blazor firmy Microsoft:

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 PDF bezpośrednio za pomocą Results.File. Przeglądarka odbiera plik z prawidłowymi nagłówkami Content-Disposition i automatycznie inicjuje 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 buduje ciąg HTML faktury z danych C# i konwertuje go na PDF. Funkcja ChromePdfRenderer traktuje ciąg HTML tak samo jak stronę internetową, stosując całe CSS i renderując ją z silnikiem 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>$999</td><td>$999</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 C# lub biblioteka szablonów wstawia dynamiczne dane przed przekazaniem ciągu 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>$999</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>$999</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>$999</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 HTML, w tym inline CSS i osadzony JavaScript. Implementacja automatycznie obsługuje układ, renderowanie czcionek i podziały stron.

Jak stworzyć podglądacz PDF Blazor za pomocą IronPDF: Rysunek 3 - Faktura PDF w podglądaczu

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 wygenerowane 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 sandboxie przeglądarki z użyciem WASM. Silnik renderujący IronPDF zależy od natywnych plików binarnych, które nie mogą działać wewnątrz 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

Na kliencie WASM wstrzyknij HttpClient i wywołaj punkt końcowy API. Szablon projektu Blazor WASM z potrójnym hostowaniem wstępnie konfiguruje HttpClient do celu na główny adres 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: scałanie 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?

Łączenie łączy wiele instancji PdfDocument w jeden plik, przydatny do składania sekcji raportu, dodawania aneksów lub łączenia plików wybranych przez użytkownika. Przewodnik dotyczący scałania 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, przekaż merged.BinaryData do wzorca URI danych base64 z wcześniejszych sekcji. Scalony obiekt PdfDocument również akceptuje dalsze operacje (znak wodny, ustawienia zabezpieczeń lub dodatkowe dodanie stron) przed zakodowaniem do wyświetlania.

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ą zachowywane, gdy PDF jest otwierany w dowolnym standardowym podglądaczu, w tym w przeglądarce <iframe>. Dla aplikacji Blazor uruchom logikę adnotacji po stronie serwera i zwróć pdf.BinaryData do komponentu do wyświetlania.

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

Chronione hasłem dokumenty PDF 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 używa kontroli InputFile Blazor do przechwytywania pliku, a następnie wyświetla go bezpośrednio bez jakiegokolwiek 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)}";
    }
}

Dla przesłanych PDF, które wymagają przetwarzania po stronie serwera przed wyświetleniem, takich jak znakowanie wodne, ekstrakcja stron, lub ponowne szyfrowanie, załaduj bajty do PdfDocument najpierw:

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: scałanie, 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

Odbierz swój BEZPŁATNY

30-dniowy klucz próbny natychmiast.

15-dniowy klucz próbny natychmiast.

Greencheck In Yellowcircle related to Jak efektywnie porównywać dwa pliki PDF w C# z użyciem IronPDF
Formularz próbny został wysłany
pomyślnie.

Twój klucz próbny powinien być w emailu.
Jeżeli go nie ma, skontaktuj się
support@ironsoftware.com

bullet_checkedNie wymaga karty kredytowej ani tworzenia konta
test_punktorówTestuj w produkcji
bez znaków wodnych
kalendarz_punktorów30 dni w pełni
funkcjonalny produkt
wsparcie_punktorów24/5 wsparcie techniczne
w trakcie okresu próbnego
30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespół wsparcia Iron

Jesteśmy online 24 godziny, 5 dni w tygodniu.
Czat
E-mail
Zadzwoń do mnie