如何在 Blazor 中在新標籤中打開 PDF

先決條件和設置

開始在 Visual Studio 2022 中創建一個新的 Blazor 服務器項目。通過 NuGet 包管理器控制台安裝 IronPDF:

Install-Package IronPdf

在Program.cs中配置您的 IronPDF 許可，以啟用完整功能：

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

了解挑戰

Blazor 服務器應用程式無法直接從伺服器上的 C# 代碼操作瀏覽器標籤。 Blazor 在新標籤中打開 PDF 的任務需要 JavaScript 互操作（JS 互操作）來橋接伺服器端的 PDF 生成與客戶端的窗口管理。

IronPDF使開發人員能夠在伺服器上生成高品質的 PDF 文件，然後可以使用 JavaScript 的window.open()功能來顯示它們。 這種方法意味著在 .NET 應用程序中解決了一個常見的客戶端-服務器問題。

在 Blazor 網頁應用中實現 JavaScript 函數

將此 JavaScript 代碼添加到_Host.cshtml文件中，以在瀏覽器的新標籤中處理 PDF 顯示。 這是負責客戶端窗口管理的模塊：

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

window.openPdfInNewTab JavaScript 函數對於解決從伺服器打開新標籤的挑戰至關重要。 它接受來自 Blazor 服務器的 PDF 數據作為 Base64 字串，客戶端代碼將其轉換為二進制Blob對象。

然後使用此 blob 創建一個臨時 URL，最後將其傳遞給window.open(blobUrl, '_blank')以強制瀏覽器在新標籤中打開 PDF。

創建 Blazor 組件

創建一個新的 Razor 組件，生成 PDF 並在新標籤中打開它們。 這是解決方案的主要模板：

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

此代碼塊定義了主要的互動頁面。 Razor 標記創建了一個帶有 URL 輸入字段和按鈕的簡單用戶界面。 C# 的@code塊處理邏輯：當按下按鈕時，它使用ChromePdfRenderer實例從用戶提供的 URL 生成 PDF。

然後將生成的 PDF 字節數組轉換為 Base64 字串，並使用@inject IJSRuntime JS調用 JavaScript 函數，為用戶打開該文檔。

處理動態 HTML 內容

要從動態內容而不是 URL 生成 PDF，請修改您的方法以使用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");
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

GenerateFromHtml方法演示了IronPDF如何從動態生成的 HTML 標記而不是現有 URL 生成 PDF。 它構建了一個包含標題、內容和動態數據的完整 HTML 字串。 動態內容生成的解決方案是RenderHtmlAsPdf方法。

處理常見問題

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

導航替代方案

除了 JavaScript 互操作，您還可以通過靜態文件中介件提供 PDF 並使用標準 HTML 錨標簽作為替代導航選項：

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

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

此方法適用於預生成的 PDF，但不具備 JS 互操作方法的動態生成能力。

最佳實踐

1. 錯誤處理：始終將 PDF 生成放在try-catch塊中，當發生問題時，為用戶提供有意義的錯誤消息。

2. 性能：使用async/await模式，以防止在生成 PDF 時阻塞用戶界面。

3. 用戶體驗：在生成期間顯示加載指示器，並優雅地處理彈出式攔截場景。

4. DOM 操作：請記住，伺服器上的 C# 無法直接操控客戶端的 DOM； 這就是為什麼 JS 互操作是必不可少的。 您不需要手動設置新窗口的高度或寬度，因為瀏覽器會處理 PDF 檢視器。

5. 安全性：在生成 PDF 之前，驗證和清理用戶輸入。

結論

結合IronPDF強大的 PDF 生成功能與 Blazor 的 JavaScript 互操作提供了一個可靠的解決方案，可以在新的瀏覽器標籤中打開 PDF。 此方法使開發人員能夠創建動態、專業的 PDF 文件，無縫集成到由 Microsoft 的 .NET 技術構建的現代 Blazor 應用中。

準備在您的 Blazor 項目中實施 PDF 功能了嗎？ 立即開始您的免費IronPDF 試用。 試用包括無水印的完整功能和全面的支援，確保您成功。