Aby otwierać pliki PDF w nowych kartach przeglądarki z aplikacji Blazor Server, należy użyć IronPDF do generowania plików PDF po stronie serwera w połączeniu z interoperacyjnością JavaScript w celu obsługi zarządzania oknami po stronie klienta, co rozwiązuje problem komunikacji międzyplatformowej.

Otwieranie dokumentów PDF w nowej karcie przeglądarki jest częstym wymaganiem w aplikacjach internetowych Blazor. Ten samouczek pokazuje, jak generować pliki PDF za pomocą IronPDF i wyświetlać je w nowych kartach przy użyciu interoperacyjności JavaScript, zapewniając użytkownikom płynne przeglądanie dokumentów. Ten przykład skupia się na wersji Blazor Server.

Jakie są wymagania wstępne dla mojego projektu Blazor?

Zacznij od utworzenia nowego projektu Blazor Server w Visual Studio 2022. Zainstaluj IronPDF za pomocą konsoli NuGet Package Manager:

Install-Package IronPdf

Skonfiguruj swoją licencję IronPDF w Program.cs, aby włączyć pełną funkcjonalność:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

License.LicenseKey = "YOUR-LICENSE-KEY"

Aby odblokować wszystkie funkcje, konieczne będzie zastosowanie klucza licencyjnego. IronPDF płynnie współpracuje z aplikacjami Blazor Server, zapewniając solidne możliwości generowania plików PDF dla nowoczesnych aplikacji internetowych. Jeśli dopiero zaczynasz przygodę z IronPDF, zapoznaj się z przewodnikiem szybkiego startu, aby poznać podstawy.

Dlaczego Blazor nie może bezpośrednio otwierać plików PDF w nowych kartach?

Aplikacje Blazor Server nie mogą bezpośrednio manipulować kartami przeglądarki z poziomu kodu C# na serwerze. Otwarcie pliku PDF w nowej karcie z poziomu Blazor wymaga interoperacyjności JavaScript (JS interop), aby połączyć generowanie plików PDF po stronie serwera z zarządzaniem oknami po stronie klienta.

IronPDF pozwala deweloperom generować wysokiej jakości dokumenty PDF na serwerze, które można następnie wyświetlić, korzystając z funkcjonalności JavaScript window.open(). Takie podejście rozwiązuje powszechny problem granicy klient-serwer w aplikacjach .NET. Silnik renderujący biblioteki oparty na przeglądarce Chrome zapewnia konwersję HTML do PDF z idealną dokładnością pikselową, zachowując wizualną integralność dokumentów.

Podczas pracy z Blazorem i IronPDF należy pamiętać, że wykonywanie kodu JavaScript odbywa się po stronie klienta, natomiast generowanie plików PDF ma miejsce na serwerze. To rozdzielenie wymaga użycia interopu JavaScript do zadań związanych z zarządzaniem oknami.

Jak zaimplementować funkcje JavaScript w mojej aplikacji internetowej Blazor?

Dodaj ten kod JavaScript do swojego pliku _Host.cshtml, aby obsługiwać wyświetlanie PDF w nowych kartach przeglądarki. Ten moduł zarządza operacjami okien po stronie klienta:

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' }); 
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' }); 
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

Funkcja JavaScript window.openPdfInNewTab jest kluczowa do otwierania nowej karty z serwera. Akceptuje dane PDF jako ciąg Base64 z serwera Blazor, a kod po stronie klienta konwertuje go na binarny obiekt Blob. Podejście to jest podobne do konwersji pliku PDF do formatu Base64, ale w odwrotnym kierunku, umożliwiając przeglądarce wyświetlenie zawartości pliku PDF.

Ten blob jest następnie używany do stworzenia tymczasowego URL, który jest ostatecznie przekazywany do window.open(blobUrl, '_blank'), aby wymusić otwarcie PDF w nowej karcie przeglądarki. Technika adresów URL obiektów blob jest powszechnie stosowana podczas ładowania plików PDF z pamięci bez konieczności przechowywania plików po stronie serwera.

W przypadku aplikacji wymagających zwiększonego bezpieczeństwa należy rozważyć wdrożenie uprawnień i haseł do plików PDF przed przesłaniem dokumentu do klienta. Możesz również zapoznać się z podpisami cyfrowymi, aby zapewnić autentyczność dokumentów.

Jak utworzyć komponent Blazor?

Utwórz nowy komponent Razor, który generuje pliki PDF i otwiera je w nowych kartach. Oto główny szablon rozwiązania:

@page "/pdf-viewer"
@using IronPdf
@inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
    <input @bind="targetUrl" class="form-control" />
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" 
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "___PROTECTED_URL_69___";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() => 
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab", 
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site."; 
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

@page "/pdf-viewer"
@using IronPdf
@inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
    <input @bind="targetUrl" class="form-control" />
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" 
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "___PROTECTED_URL_69___";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() => 
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab", 
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site."; 
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

Ten blok kodu definiuje główną stronę interaktywną. Znaczniki Razor tworzą prosty interfejs użytkownika z polem wprowadzania adresu URL i przyciskiem. Blok C# @code obsługuje logikę: gdy przycisk jest kliknięty, używa instancji ChromePdfRenderer do wygenerowania PDF z podanego przez użytkownika URL. Opcje renderowania pozwalają dostosować marginesy, włączyć renderowanie JavaScript oraz ustawić opóźnienia renderowania dla treści dynamicznych.

Następnie konwertuje wynikową tablicę bajtów PDF na ciąg Base64 i używa @inject IJSRuntime JS do wywołania funkcji JavaScript, otwierając dokument dla użytkownika. Ten wzorzec jest szczególnie przydatny podczas konwersji adresów URL do formatu PDF w aplikacjach internetowych. W bardziej złożonych scenariuszach warto wdrożyć asynchroniczne generowanie plików PDF w celu uzyskania lepszej wydajności.

Rozważ wdrożenie niestandardowego logowania w celu śledzenia działań związanych z generowaniem plików PDF i rozwiązywania problemów. Możesz również dodać znaki wodne lub nagłówki i stopki, aby ulepszyć swoje pliki PDF.

Jak wygląda interfejs użytkownika?

Jak wyświetla się plik PDF w nowej karcie?

Jak pracować z dynamiczną zawartością HTML?

Aby generować PDF z dynamicznej treści zamiast URL, zmodyfikuj podejście, aby używać RenderHtmlAsPdf:

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{font-family: Arial; padding: 20px;}}
                h1 {{color: #2c3e50;}}
                table {{border-collapse: collapse; width: 100%;}}
                th, td {{border: 1px solid #ddd; padding: 8px;}}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab", 
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{font-family: Arial; padding: 20px;}}
                h1 {{color: #2c3e50;}}
                table {{border-collapse: collapse; width: 100%;}}
                th, td {{border: 1px solid #ddd; padding: 8px;}}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab", 
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

Metoda GenerateFromHtml demonstruje, jak IronPDF może generować PDF z dynamicznie wygenerowanego znacznika HTML zamiast istniejącego URL. Tworzy pełny ciąg znaków HTML zawierający nagłówek, treść i dane dynamiczne. Metoda RenderHtmlAsPdf płynnie obsługuje konwersję. To podejście idealnie nadaje się do tworzenia raportów PDF z danymi dynamicznymi z baz danych lub interfejsów API.

Możesz wzbogacić swoje treści HTML o niestandardowe czcionki, responsywny CSS, a nawet osadzone obrazy przy użyciu DataURIs. W przypadku złożonych układów warto rozważyć użycie Bootstrap i Flexbox, aby zapewnić spójne renderowanie.

Podczas pracy z językami międzynarodowymi IronPDF zapewnia doskonałą obsługę Unicode, aby zagwarantować prawidłowe renderowanie znaków w różnych językach i alfabetach. Można również kontrolować podziały stron i wdrażać niestandardowe rozmiary papieru w celu spełnienia specjalistycznych wymagań dotyczących dokumentów.

Jak wygląda zaktualizowany interfejs użytkownika?

Jak wyświetla się dynamiczny plik PDF?

Z jakimi typowymi problemami powinienem się zmierzyć?

Dlaczego kompatybilność między przeglądarkami ma znaczenie?

Różne przeglądarki obsługują adresy URL obiektów blob w różny sposób. Przetestuj swoje rozwiązanie w przeglądarkach Chrome, Firefox, Edge i Safari, aby zapewnić spójne działanie. Niektóre przeglądarki mogą mieć specyficzne wymagania dotyczące obsługi wyskakujących okienek lub ograniczenia bezpieczeństwa. Należy rozważyć wdrożenie mechanizmów awaryjnych dla przeglądarek, które domyślnie blokują wyskakujące okienka.

Podczas pracy z wdrożeniami Azure mogą pojawić się błędy 502 Bad Gateway lub inne problemy związane z hostingiem. Zawsze testuj generowanie plików PDF w środowisku docelowym i wdrażaj odpowiednie procedury obsługi błędów.

Jak radzić sobie z dużymi plikami PDF?

W przypadku dużych dokumentów PDF warto rozważyć wdrożenie buforowania po stronie serwera w celu poprawy wydajności:

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;
        
        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;
        
        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData
        
        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData
        
        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

Aby uzyskać optymalną wydajność w przypadku dużych plików, warto rozważyć techniki kompresji PDF oraz linearyzację w celu przyspieszenia wyświetlania stron internetowych. Można również zapoznać się z funkcją równoległego generowania plików PDF do zastosowań w przetwarzaniu wsadowym.

Jakie alternatywne opcje nawigacji mogę wykorzystać?

Oprócz interoperacyjności z JavaScriptem można udostępniać pliki PDF za pośrednictwem oprogramowania pośredniczącego do obsługi plików statycznych oraz używać standardowych tagów kotwic HTML do alternatywnej nawigacji:

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

Takie podejście sprawdza się dobrze w przypadku wcześniej wygenerowanych plików PDF, ale nie oferuje możliwości dynamicznego generowania, jakie zapewnia metoda JS Interop. W bardziej zaawansowanych scenariuszach warto rozważyć wdrożenie dedykowanego komponentu do przeglądania plików PDF lub użycie MemoryStream do wyświetlania plików PDF bez zapisywania ich na dysku.

Możesz również rozważyć zapisywanie plików PDF w chmurze, np. w usłudze Azure Blob Storage, aby uzyskać lepszą skalowalność. W przypadku aplikacji wymagających dostępu offline warto rozważyć wdrożenie funkcji pobierania plików PDF obok funkcji nowej karty.

Jakich najlepszych praktyk powinienem przestrzegać?

1. Obsługa błędów: Należy otoczyć generowanie plików PDF blokami try-catch z sensownymi komunikatami o błędach. Śledź problemy za pomocą niestandardowego rejestrowania błędów.

2. Wydajność: Użyj async/await, aby zapobiec blokowaniu interfejsu użytkownika. Wprowadź opóźnienia renderowania dla stron z dużą ilością kodu JavaScript. Rozgrzej silnik, aby przyspieszyć początkowe renderowanie.

3. Doświadczenie użytkownika: Wyświetlanie wskaźników ładowania i płynne radzenie sobie z blokadami wyskakujących okienek. Śledź postępy w przypadku wielostronicowych plików PDF. Proszę o jasne informacje zwrotne w przypadku problemów z łącznością.

4. Manipulacja DOM: Należy pamiętać, że C# po stronie serwera nie może bezpośrednio manipulować DOM po stronie klienta. W przypadku złożonych interakcji należy używać detektorów zdarzeń JavaScript.

5. Bezpieczeństwo: Sprawdź wszystkie dane wprowadzone przez użytkownika przed wygenerowaniem pliku PDF. W razie potrzeby zastosuj czyszczenie plików PDF, podpisy cyfrowe i szyfrowanie. Użyj protokołu HTTPS w celu zapewnienia bezpiecznej transmisji.

6. Zarządzanie zasobami: Prawidłowo usuwaj dokumenty PDF i zapobiegaj wyciekom pamięci. Monitoruj rozmiar pakietu w celu zoptymalizowania wdrożeń kontenerowych.

Wnioski

Połączenie potężnych możliwości generowania plików PDF przez IronPDF z interoperacyjnością JavaScript w Blazorze zapewnia solidne rozwiązanie do otwierania plików PDF w nowych kartach przeglądarki. Takie podejście umożliwia programistom tworzenie dynamicznych, profesjonalnych dokumentów PDF, które płynnie integrują się z nowoczesnymi aplikacjami Blazor. Niezależnie od tego, czy konwertujesz HTML na PDF, tworzysz formularze, czy organizujesz złożone dokumenty, IronPDF zapewnia narzędzia niezbędne do obsługi plików PDF na poziomie Enterprise.

Chcesz wdrożyć funkcje PDF w swoim projekcie Blazor? Rozpocznij bezpłatny okres próbny IronPDF już dziś. Wersja próbna obejmuje pełną funkcjonalność bez znaków wodnych oraz kompleksowe wsparcie, aby zapewnić Ci sukces. W przypadku wdrożeń produkcyjnych zapoznaj się z naszymi opcjami licencyjnymi i przewodnikami wdrożeniowymi dla różnych platform, w tym Windows, Linux i Azure.