訊息圖示
跳過到頁腳內容
  1. IronPDF
  2. IronPDF博客
  3. 使用IronPDF
  4. Blazor 在新標籤中開啟 PDF
使用IRONPDF

Blazor 使用 IronPDF 在新標籤中開啟 PDF：開發人員教程

Curtis Chau
Curtis Chau
發表日期:

在新的瀏覽器標籤頁中開啟 PDF 文件是 Blazor Web 應用程式的常見需求。 本教學課程示範如何使用IronPDF產生 PDF 文件，並使用 JavaScript 互通在新分頁中顯示它們，從而為使用者提供無縫的文件檢視體驗。 本範例以 Blazor Server 版本為例。

前提條件和設置

首先在 Visual Studio 2022 中建立一個新的 Blazor Server 專案。透過 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
$vbLabelText   $csharpLabel

理解挑戰

Blazor Server 應用程式無法透過伺服器上的 C# 程式碼直接操作瀏覽器標籤頁。 Blazor 在新分頁中開啟 PDF 的任務需要 JavaScript InterOp（JS 互通）來連接伺服器端 PDF 產生和用戶端視窗管理。

IronPDF 使開發人員能夠在伺服器上產生高品質的 PDF 文檔，然後可以使用 JavaScript 的window.open()功能顯示這些文檔。 這種方法意味著解決網路應用程式中常見的客戶端-伺服器問題。

在 Blazor Web 應用程式中實作 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>
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

window.openPdfInNewTab JavaScript 函數對於解決從伺服器開啟新標籤頁的難題至關重要。 它從 Blazor 伺服器接收Base64字串形式的 PDF 數據，客戶端程式碼將其轉換為二進位 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. 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;
        }
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

此程式碼區塊定義了主要的互動式頁面。 Razor 標記創建了一個簡單的使用者介面，其中包含一個 URL 輸入欄位和一個按鈕。 C# @code 程式碼區塊處理邏輯：當按鈕被點擊時，它使用 ChromePdfRenderer 實例從使用者提供的 URL 產生 PDF。

然後，它將產生的 PDF 位元組陣列轉換為Base64字串，並使用@inject IJSRuntime JS 呼叫 JavaScript 函數，從而為使用者開啟文件。

使用者介面輸出

Blazor 使用 IronPDF 在新分頁中開啟 PDF：開發者教學：圖 1 - 基本 UI 範例

輸出結果以 PDF 格式在新分頁中開啟。

Blazor 使用 IronPDF 在新分頁中開啟 PDF：開發者教學：圖 2 - 第一個 PDF 在新分頁中開啟

處理動態 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
$vbLabelText   $csharpLabel

GenerateFromHtml方法示範了 IronPDF 如何從動態產生的 HTML 標籤而不是現有 URL 產生 PDF。 它會建立一個完整的 HTML 字串，其中包含標題、內容和動態資料。 動態內容產生的解決方案是RenderHtmlAsPdf方法。

Blazor 伺服器使用者介面已更新

Blazor 使用 IronPDF 在新分頁中開啟 PDF：開發者教學：圖 3 - 伺服器專案的更新範例 UI

PDF檔案在新瀏覽器標籤頁中開啟

Blazor 使用 IronPDF 在新分頁中開啟 PDF：開發者教學：圖 4 - 建立並在新分頁中開啟的動態 PDF 範例

處理常見問題

跨瀏覽器相容性

不同的瀏覽器對 blob URL 的處理方式不同。 在 Chrome、Firefox、Edge 和 Safari 瀏覽器上測試您的實現，以確保行為一致。

大文件

對於大型PDF文檔，可以考慮實施伺服器端快取來提高效能：

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

導航替代方案

除了 JavaScript 互通之外，您還可以透過靜態文件中間件提供 PDF 文件，並使用標準的 HTML 錨點標籤作為另一種導覽方式：

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>
<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

這種方法對於預先產生的 PDF 檔案效果很好，但缺乏 JS InterOp 方法的動態產生功能。

最佳實務

1.錯誤處理：始終將 PDF 產生程式碼封裝在 try-catch 區塊中，並在出現問題時向使用者提供有意義的錯誤訊息。 2.效能：使用 async/await 模式防止在 PDF 產生期間 UI 阻塞。 3.使用者體驗：在生成過程中顯示載入指示器，並優雅地處理彈出視窗攔截器場景。

  1. DOM操作：請記住，伺服器端的 C# 不能直接操作客戶端的 DOM； 這就是為什麼 JS 互通性至關重要。 您無需手動設定新視窗的高度或寬度，因為瀏覽器會自動處理 PDF 檢視器。 5.安全性：在產生PDF之前驗證並清理使用者輸入。

結論

將 IronPDF 強大的 PDF 生成功能與 Blazor 的 JavaScript InterOp 結合，為在新瀏覽器標籤頁中開啟 PDF 提供了一個強大的解決方案。 這種方法使開發人員能夠創建動態、專業的 PDF 文檔，並與基於 Microsoft .NET 技術構建的現代 Blazor 應用程式無縫整合。

準備在 Blazor 專案中實現 PDF 功能嗎？ 立即開始您的 IronPDF 免費試用。 試用版包含所有功能，無浮水印，並提供全面的支持，確保您成功。

常見問題解答

如何使用 Blazor 在新分頁中開啟 PDF 檔案？

您可以使用 Blazor 在新标签页中打开 PDF，方法是使用 IronPDF 生成 PDF，并利用 JavaScript interop 在新标签页中显示 PDF。這種方法可確保用戶在檢視文件時有流暢的使用體驗。

什麼是 Blazor 中的 JavaScript interop？

Blazor 中的 JavaScript interop 允許 Blazor 應用程式從 .NET 程式碼呼叫 JavaScript 函式，反之亦然。這對於在新標籤開啟 PDF 等任務非常有用，JavaScript 可以處理瀏覽器特定的操作。

為什麼要使用 IronPDF 在 Blazor 中產生 PDF？

IronPDF 是在 Blazor 應用程式中產生 PDF 的有效工具。它提供了強大的功能，可進行無縫的 PDF 創建與操作，可輕鬆與 Blazor 的 JavaScript 互操作整合，以增強文件處理能力。

IronPDF 是否與 Blazor 伺服器相容？

是的，IronPDF 與 Blazor 伺服器完全相容。它可以用來產生和管理 PDF，然後使用 JavaScript interop 在新的索引標籤中打開。

在 Blazor 應用程式中以新標籤開啟 PDF 有什麼好處？

在新索引標籤中開啟 PDF 可增強使用者體驗，讓使用者不需從目前頁面導航即可檢視文件。IronPDF 與 JavaScript 互操作支援的此方法可確保瀏覽會話更具互動性，且不會中斷。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

相關文章

30 天試用 → 完整產品。無限制。無卡。 開始免費試用