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 licencję IronPDF w Program.cs, aby uzyskać pełną funkcjonalność:

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 umożliwia programistom generowanie wysokiej jakości dokumentów PDF na serwerze, które następnie można wyświetlać za pomocą funkcji 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 pliku _Host.cshtml, aby obsługiwać wyświetlanie plików 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 ma kluczowe znaczenie dla otwierania nowej karty z serwera. Przyjmuje dane PDF jako ciąg Base64 z serwera Blazor, a kod po stronie klienta konwertuje je na obiekt binarny 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 obiekt blob jest następnie wykorzystywany do utworzenia tymczasowego adresu URL, który ostatecznie jest przekazywany do window.open(blobUrl, '_blank') w celu wymuszenia na przeglądarce otwarcia pliku PDF w nowej karcie. 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;
        }
    }
}

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ę: po kliknięciu przycisku wykorzystuje instancję ChromePdfRenderer do wygenerowania pliku PDF na podstawie adresu URL podanego przez użytkownika. 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 znaków 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 pracować z dynamiczną zawartością HTML?

Aby generować pliki PDF na podstawie treści dynamicznej zamiast adresów URL, zmodyfikuj swoje 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");
}

Private Async Function GenerateFromHtml() As Task
    ' Define CSS styles inside the HTML string for structure and appearance.
    Dim htmlContent As String = $"
        <!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>"
    Dim renderer = New ChromePdfRenderer()
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Dim pdfBytes As Byte() = pdfDocument.BinaryData
    Await JS.InvokeVoidAsync("openPdfInNewTab", Convert.ToBase64String(pdfBytes), "dynamic.pdf")
End Function

Metoda GenerateFromHtml pokazuje, w jaki sposób IronPDF może wygenerować plik PDF na podstawie dynamicznie generowanego kodu HTML zamiast istniejącego adresu 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.

Z jakimi typowymi problemami powinienem się zmierzyć?

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

Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' 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

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.