Blazor Otwórz PDF w nowej karcie z IronPDF: Tutorial dla deweloperów

Wymagania wstępne i konfiguracja

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

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Zrozumienie wyzwania

Aplikacje Blazor Server nie mogą bezpośrednio manipulować kartami przeglądarki z poziomu kodu C# na serwerze. Zadanie otwarcia pliku PDF w nowej karcie w Blazorze wymaga JavaScript InterOp (JS interop) w celu połączenia generowania 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 oznacza rozwiązanie typowego problemu klient-serwer w aplikacji sieciowej.

Wdrażanie funkcji JavaScript w aplikacji internetowej Blazor

Dodaj ten kod JavaScript do pliku _Host.cshtml, aby obsługiwać wyświetlanie plików PDF w nowych kartach przeglądarki. Jest to moduł odpowiedzialny za zarządzanie oknami 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>

The provided code is JavaScript, not C#. However, I can help you convert it into VB.NET code that would perform a similar function if executed in a VB.NET environment with a web browser control or similar setup. Here's how you might implement similar functionality in VB.NET:



Note: This VB.NET code assumes you are working in a desktop application environment where you can use the `Process.Start` method to open a PDF file with the default PDF viewer. If you are working in a web environment, you would need to adapt this code to fit the web context, possibly using a web server to serve the PDF file to the client.

Funkcja JavaScript window.openPdfInNewTab ma kluczowe znaczenie dla rozwiązania problemu otwierania nowej karty z serwera. Przyjmuje dane PDF jako ciąg znaków Base64 z serwera Blazor, a kod po stronie klienta konwertuje je na obiekt binarny typu Blob.

Ten obiekt blob jest następnie wykorzystywany do utworzenia tymczasowego adresu URL, który ostatecznie jest przekazywany do window.open(blobUrl, '_blank'), aby wymusić na przeglądarce otwarcie pliku PDF w nowej karcie.

Tworzenie komponentu 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>
</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 = "https://ironpdf.com";
    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. We run this call to open the PDF
            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>
</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 = "https://ironpdf.com";
    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. We run this call to open the PDF
            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;
        }
    }
}

Imports IronPDF
Imports Microsoft.JSInterop

@page "/pdf-viewer"
@inject IJSRuntime JS

<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" disabled="@isProcessing">
    @If isProcessing Then
        <span>Generating PDF...</span>
    Else
        <span>Generate and Open PDF</span>
    End If
</button>
@If Not String.IsNullOrEmpty(errorMessage) Then
    <div class="alert alert-danger mt-3">@errorMessage</div>
End If

@Code
    Private targetUrl As String = "https://ironpdf.com"
    Private isProcessing As Boolean = False
    Private errorMessage As String = ""

    Private Async Function GenerateAndOpenPdf() As Task
        isProcessing = True
        errorMessage = ""
        Try
            ' Configure Chrome PDF renderer. Note the rendering details
            Dim renderer As New ChromePdfRenderer With {
                .RenderingOptions = New ChromePdfRenderOptions With {
                    .MarginTop = 10,
                    .MarginBottom = 10,
                    .MarginLeft = 10,
                    .MarginRight = 10,
                    .EnableJavaScript = True,
                    .RenderDelay = 500
                }
            }
            ' Generate PDF from URL
            Dim pdfDocument = Await Task.Run(Function() renderer.RenderUrlAsPdf(targetUrl))
            ' Convert to base64
            Dim pdfBytes As Byte() = pdfDocument.BinaryData
            Dim base64Pdf As String = Convert.ToBase64String(pdfBytes)
            ' Open in new tab via JS interop. We run this call to open the PDF
            Dim success As Boolean = Await JS.InvokeAsync(Of Boolean)("openPdfInNewTab", base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf")
            If Not success Then
                ' Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site."
            End If
        Catch ex As Exception
            errorMessage = $"Error: {ex.Message}"
        Finally
            isProcessing = False
        End Try
    End Function
End Code

Ten blok kodu definiuje główną stronę interaktywną. Znaczniki Razor tworzą prosty interfejs użytkownika z polem wprowadzania adresu URL i przyciskiem. Blok @code w języku C# obsługuje logikę: po kliknięciu przycisku wykorzystuje instancję ChromePdfRenderer do wygenerowania pliku PDF na podstawie adresu URL podanego przez użytkownika.

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.

Praca z dynamiczną zawartością HTML

Aby generować pliki PDF z treści dynamicznych zamiast z 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; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </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; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </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; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </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 generować 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. Odpowiedzią na dynamiczne generowanie treści jest metoda RenderHtmlAsPdf.

Radzenie sobie z typowymi problemami

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration

Alternatywne opcje nawigacji

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 jako alternatywnej opcji nawigacji:

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

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

The provided input is HTML, not C# code. Please provide valid C# code for conversion to VB.NET.

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.

Najlepsze praktyki

1. Obsługa błędów: Generowanie plików PDF należy zawsze umieszczać w blokach try-catch i wyświetlać użytkownikom zrozumiałe komunikaty o błędach w przypadku wystąpienia problemu.
2. Wydajność: Należy stosować wzorce async/await, aby zapobiec blokowaniu interfejsu użytkownika podczas generowania plików PDF.
3. Doświadczenie użytkownika: Wyświetlaj wskaźniki ładowania podczas generowania i płynnie radź sobie z sytuacjami, w których uruchomiona jest blokada wyskakujących okienek.
4. Manipulacja DOM: Należy pamiętać, że C# na serwerze nie może bezpośrednio manipulować DOM klienta; dlatego JS InterOp jest niezbędny. Nie trzeba ręcznie ustawiać wysokości ani szerokości nowego okna, ponieważ przeglądarka obsługuje przeglądarkę plików PDF.
5. Bezpieczeństwo: Sprawdzaj i oczyszczaj dane wprowadzane przez użytkownika przed generowaniem plików PDF

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 opartymi na technologii .NET firmy Microsoft.

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.