IRONSOFTWAREHOME
IRONSUITE所有10個程式庫只需支付2個的價格
聯絡銷售
按公司
使用IRONPDF

如何在Selenium WebDriver C#中閱讀PDF文件，而無需常見的複雜性

Curtis Chau
Curtis Chau
Updated: 2026年4月23日

在新的瀏覽器分頁中開啟PDF文件是Blazor網頁應用程式中的一項常見需求。 本教程演示了如何使用IronPDF生成PDF，並使用JavaScript互操作在新分頁中顯示它們，為使用者提供無縫的文件查看體驗。 本範例專注於Blazor Server版本。

先決條件和設置

首先在Visual Studio 2022中建立一個新的Blazor Server專案。通過NuGet套件管理器控制台安裝IronPDF：

PM > Install-Package IronPdf

在Program.cs中配置您的IronPDF授權以啟用完整功能：

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

了解挑戰

Blazor Server應用程式無法直接從伺服器上的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>

JavaScript函式window.openPdfInNewTab對於解決從伺服器打開新分頁的挑戰至關重要。 它接受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. 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;
        }
    }
}

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

然後它將生成的PDF位元組陣列轉換為@inject IJSRuntime JS調用JavaScript函式，為使用者開擇文件。

UI輸出

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");
}
C#

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

更新的Blazor Server UI

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

導航選項

除了JavaScript互操作，您還可以通過靜態文件中介軟體提供PDF，並使用標準的HTML錨標籤作為另一種導航選項：

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

這種方法適用於預生成的PDF，但缺乏JS互操作方法的動態生成功能。

最佳實踐

  1. 錯誤處理： 始終將PDF生成包在try-catch塊中，並在出現問題時向使用者提供有意義的錯誤消息。
  2. 性能： 使用async/await模式防止在PDF生成過程中阻塞UI。
  3. 使用者體驗： 在生成過程中顯示載入指示器，優雅地處理彈出窗口攔截問題。
  4. DOM 操作： 請記住，伺服器上的C#無法直接操作客戶端的DOM； 這就是為什麼JS互操作至關重要。 您不需要手動設置新窗口的高度或寬度，因為瀏覽器會處理PDF查看器。
  5. 安全性： 在生成PDF之前驗證並清理使用者輸入

結論

將IronPDF強大的PDF生成能力與Blazor的JavaScript互操作相結合，提供了一個在新的瀏覽器分頁中打開PDF的強大解決方案。 這種方法使開發人員能夠建立動態、專業的PDF文件，無縫整合到使用Microsoft .NET技術構建的現代Blazor應用程式中。

準備好在您的Blazor專案中實現PDF功能嗎？ 立即開始您的免費IronPDF試用。 試用版包含完整功能，沒有浮水印，並提供綜合支持以確保您的成功。

Curtis Chau
Curtis Chau
技術作家

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

...
閱讀更多

相關文章

Key in blue circle

立即免費取得 30 天試用金鑰。

無任何限制。100% 解鎖。無需信用卡。

bullet_checked無需信用卡或建立帳號無任何限制。100% 解鎖。無需信用卡。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
預訂您的免費現場演示
Booking Badge

受到全球數百萬工程師的信任

Iron Software的客戶標誌
獲取您的無義務諮詢
填寫以下表格或電子郵件sales@ironsoftware.com
您的詳細資訊將始終保密。
受到全球數百萬工程師的信任
Iron Software的客戶標誌
立即獲取您的30天試用金鑰。
無需信用卡或帳戶建立