Jak mogę otworzyć PDF w nowej karcie używając Blazor?

Możesz otworzyć PDF w nowej karcie używając Blazor przez wygenerowanie PDF z IronPDF i wykorzystanie interop JavaScript do wyświetlenia go w nowej karcie. To podejście zapewnia płynne doświadczenie użytkownika podczas przeglądania dokumentów.

Co to jest interop JavaScript w Blazor?

Interop JavaScript w Blazor pozwala aplikacjom Blazor na wywoływanie funkcji JavaScript z kodu .NET i odwrotnie. Jest to użyteczne dla zadań takich jak otwieranie PDF w nowej karcie, gdzie JavaScript może obsługiwać operacje specyficzne dla przeglądarki.

Dlaczego powinienem używać IronPDF do generowania PDF w Blazor?

IronPDF jest efektywnym narzędziem do generowania PDF w aplikacjach Blazor. Oferuje solidne funkcje, które umożliwiają bezproblemowe tworzenie i manipulację PDF, co można łatwo zintegrować z interop JavaScript Blazor dla lepszej obsługi dokumentów.

Czy IronPDF jest kompatybilny z Blazor Server?

Tak, IronPDF jest w pełni kompatybilny z Blazor Server. Może być używany do generowania i zarządzania PDF, które następnie mogą być otwierane w nowych kartach za pomocą interop JavaScript.

Jakie są zalety otwierania PDF w nowej karcie w aplikacjach Blazor?

Otwieranie PDF w nowej karcie poprawia doświadczenie użytkownika, pozwalając na przeglądanie dokumentów bez opuszczania bieżącej strony. Ta metoda, wspierana przez IronPDF i interop JavaScript, zapewnia bardziej interaktywną i nieprzerwaną sesję przeglądania.

Biblioteka PDF dla C#

Explore IronPDF Bezpłatna próba

HTML do PDF

Online Demo Zobacz wszystkie przykłady kodu %s

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

PM >

Install-Package IronPdf

KORZYSTANIE Z IRONPDF

Jak czytać pliki PDF w Selenium WebDriver C# bez zwykłej złożoności

Curtis Chau

Updated: 23 kwietnia 2026

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.

Wymagania wstępne i konfiguracja

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

PM > Install-Package IronPdf

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"

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 mogą być wyświetlane z użyciem funkcji JavaScript'a 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.

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 jest kluczowa do rozwiązania problemu otwierania nowej zakładki z serwera. Akceptuje dane PDF jako Base64 string z serwera Blazor, a kod po stronie klienta konwertuje je na obiekt binarny 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

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 wynikowy byte array PDF na Base64 string i używa @inject IJSRuntime JS do wywołania funkcji JavaScript, otwierając dokument dla użytkownika.

Wynik interfejsu użytkownika

Blazor Otwórz PDF w nowej karcie z IronPDF: Poradnik dla programistów: Obraz 1 - Przykład podstawowego UI

Wynik z plikiem PDF otwartym w nowej karcie

Blazor Otwórz PDF w nowej karcie z IronPDF: Poradnik dla programistów: Obraz 2 - Pierwszy PDF otwarty w nowej karcie

Praca z dynamiczną zawartością HTML

Aby generować PDF z dynamicznej zawartości zamiast z URL-i, dostosuj podejście do użycia 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");
}

Metoda GenerateFromHtml demonstruje, jak IronPDF może generować PDF z dynamicznie wygenerowanego HTML zamiast istniejącego URL. Tworzy pełny ciąg znaków HTML zawierający nagłówek, treść i dane dynamiczne. Odpowiedzią na generowanie dynamicznej zawartości jest metoda RenderHtmlAsPdf.

Zaktualizowany interfejs użytkownika Blazor Server

Blazor Otwórz PDF w nowej karcie z IronPDF: Poradnik dla programistów: Obraz 3 - Zaktualizowany przykład UI dla Twojego projektu serwerowego

Plik PDF otwarty w nowej karcie przeglądarki

Blazor Otwórz PDF w nowej karcie z IronPDF: Poradnik dla programistów: Obraz 4 - Przykład dynamicznego PDF utworzonego i następnie otwartego w nowej karcie

Radzenie sobie z typowymi problemami

Kompatybilność z różnymi przeglądarkami

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.

Duże pliki

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

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.

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

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.
Wydajność: Należy stosować wzorce async/await, aby zapobiec blokowaniu interfejsu użytkownika podczas generowania plików PDF.
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.
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.
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? Bezpłatna próba IronPDF już dziś. Wersja próbna obejmuje pełną funkcjonalność bez znaków wodnych oraz kompleksowe wsparcie, aby zapewnić Ci sukces.

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ęczników.

...

Czytaj więcej