沒有找到您要找的內容嗎？
資訊圖標
跳至頁尾內容
  1. IronPDF
  2. IronPDF 部落格
  3. using IronPDF
  4. Blazor 打開 PDF 新標籤
使用IRONPDF

如何在.NET中從PDF中提取資料

Curtis Chau
Curtis Chau
已更新:

如何在Blazor中於新分頁開啟PDF

要從Blazor Server應用程式中在新的瀏覽器標籤中打開PDF，請使用IronPDF進行伺服器端PDF生成，並結合JavaScript互通性來處理客戶端視窗管理，解決跨邊界通信的挑戰。

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

我的Blazor專案需要具備哪一些前提條件？

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

Install-Package IronPdf

在Program.cs中配置您的IronPDF授權，以啟用全部功能：

License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY"
$vbLabelText   $csharpLabel

您需要應用授權金鑰來解鎖所有功能。 IronPDF能夠與Blazor Server應用程式無縫協作，為現代網頁應用提供強大的PDF生成能力。 如果您是IronPDF的新手，請查看快速入門指南以熟悉基本知識。

為什麼Blazor不能直接在新標籤中打開PDF？

Blazor Server應用程式無法直接從伺服器上的C#程式碼操縱瀏覽器分頁。 從Blazor打開新的標籤中的PDF需要使用JavaScript互通性（JS互通性）來橋接伺服器端的PDF生成與客戶端的視窗管理。

IronPDF使開發人員能夠在伺服器上生成高質量的PDF文件，然後可以使用JavaScript的window.open()功能來顯示它們。 這種方法解決了.NET應用程式中常見的客戶端和伺服器端的邊界問題。 該程式庫的Chrome渲染引擎保證了像素完美的HTML到PDF的轉換，保持了文件的視覺完整性。

當使用Blazor和IronPDF時，重要的是要理解JavaScript執行是在客戶端進行，而PDF生成是在伺服器上進行的。 這種分離需要使用JavaScript互通性來完成視窗管理任務。

我如何實現在我的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>
HTML

window.openPdfInNewTab JavaScript函式對於從伺服器開啟新標籤至關重要。 它接受來自Blazor伺服器的PDF資料作為Base64字串，然後客戶端程式碼將其轉換為二進制Blob物件。 這種方法類似於將PDF轉換為Base64，但反過來，允許瀏覽器顯示PDF內容。

然後使用這個blob建立一個臨時URL，最後將其傳遞給window.open(blobUrl, '_blank')，強迫瀏覽器在新標籤中開啟PDF。 在從記憶體中載入PDF時，不需要伺服器端文件儲存時，常用blob URL技術。

對於需要加強安全的應用程式，考慮在將文件傳輸到客戶端之前實施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>
    <input @bind="targetUrl" class="form-control" />
</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 = "___PROTECTED_URL_69___";
    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。 渲染選項允許您自定義邊距，啟用JavaScript渲染，並為動態內容設置渲染延遲。

然後將生成的PDF位元組陣列轉換為Base64字串，並使用@inject IJSRuntime JS調用JavaScript函式，為使用者打開文件。 當在網頁應用中將URL轉換為PDF時，這種模式尤其有用。 對於更為複雜的情況，您可能想實現異步PDF生成以提高性能。

考慮實現自定義日誌記錄以跟踪PDF生成活動並排除錯誤。 您還可以新增浮水印或頁眉和頁腳來增強您的PDF。

UI看起來是什麼樣的？

簡單的網頁表單，具有填滿'http://ironpdf.com'的URL輸入字段以及一個'生成和打開PDF'按鈕，用於在新標籤中打開PDF

PDF如何在新標籤中顯示？

PDF檢視器顯示C# PDF軟體庫演示，帶有多頁顯示在瀏覽器標籤中，以IronPDF for .NET文件為特點，具有可見的導航控件和縮放選項

如何處理動態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;}}
                table {{border-collapse: collapse; width: 100%;}}
                th, td {{border: 1px solid #ddd; padding: 8px;}}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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;}}
                table {{border-collapse: collapse; width: 100%;}}
                th, td {{border: 1px solid #ddd; padding: 8px;}}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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;}}
                table {{border-collapse: collapse; width: 100%;}}
                th, td {{border: 1px solid #ddd; padding: 8px;}}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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
$vbLabelText   $csharpLabel

GenerateFromHtml方法演示了IronPDF如何從動態生成的HTML標記而不是現有URL生成PDF。 它構造了一個包含標題、內容和動態資料的完整HTML字串。 RenderHtmlAsPdf方法能無縫地處理轉換。 這種方法對於建立PDF報表以動態資料從資料庫或API來說是完美的。

您可以增強您的HTML內容自定字型、響應式CSS，甚至使用DataURIs嵌入圖片新增圖像到PDF。 對於複雜的佈局，考慮使用Bootstrap和Flexbox以確保一致的渲染。

當處理國際語言時，IronPDF提供了優秀的Unicode支援以確保跨越不同語言和文字的正確字元渲染。您還可以控制頁面分隔並實現自定義紙張大小以滿足特殊的文件需求。

更新後的UI是什麼樣的？

兩個表單節，顯示從URL打開PDF和從動態HTML內容生成PDF的選項，具有已設計的輸入字段、占位符文字和加強使用者指南的動作按鈕

動態PDF如何顯示？

瀏覽器在新標籤中顯示PDF文件，呈現的報告標題為'動態PDF報告'，包含表格資料和生成時間戳，展示了動態內容渲染的成功

必須處理哪些常見問題？

為什麼跨瀏覽器相容性很重要？

不同的瀏覽器對blob URL處理方式不同。 在Chrome、Firefox、Edge和Safari上測試您的實現，以確保行為一致。 一些瀏覽器可能對彈出窗口處理或安全性限制有特定要求。 考慮為預設阻止彈出窗口的瀏覽器實施後備機制。

在處理Azure 部署時，您可能會遇到502 Bad Gateway錯誤或其它主機特定問題。 始終在目標環境中測試您的PDF生成，實施適當的錯誤處理。

我應該如何處理大PDF文件？

對於大型PDF文件，考慮實施伺服器端快取以提高性能：

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}
services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}
Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData

        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function
$vbLabelText   $csharpLabel

為了在處理大文件時獲得最佳性能，請考慮PDF壓縮技術和線性化以加快網路瀏覽。 您還可以探索平行的PDF生成以應對批量處理場景。

我可以使用哪些導航替代方案？

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

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

這種方法適合於預先生成的PDF，但缺乏JS互通性方法的動態生成能力。 對於更複雜的場景，考慮實現專用的PDF查看組件或使用MemoryStream來服務PDF而不將其保存到磁碟。

您可能還想探索將PDF保存到如Azure Blob儲存的雲儲存以提高可擴展性。 對於需要離線存取的應用程式，考慮在新的標籤功能之外實現PDF下載功能。

我應該遵循哪些最佳做法？

  1. 錯誤處理：用有意義的錯誤消息將PDF生成包在try-catch塊中。 使用自定義錯誤日誌跟踪問題。

  2. 性能：使用async/await避免UI阻塞。 對於JavaScript密集頁面實施渲染延遲。 預熱引擎以加快初始渲染。

  3. 使用者體驗：顯示載入指示，並優雅地處理彈出窗口攔截。 跟踪多頁面PDF的進度。 為網路問題提供明確的反饋。

  4. DOM操作：請記住，伺服器端C#不能直接操作客戶端的DOM。 對於複雜的交互使用JavaScript消息監聽器。

  5. 安全性：在生成PDF之前驗證所有使用者輸入。 根據需要應用PDF清理、數位簽名和加密。 使用HTTPS進行安全傳輸。

  6. 資源管理：妥善處理PDF文件以防止記憶體洩漏。 監控包大小以進行優化的容器化部署。

結論

將IronPDF的強大PDF生成功能與Blazor的JavaScript互通性相結合，為在新的瀏覽器標籤中打開PDF提供了可靠的解決方案。 這種方法使開發人員能夠建立動態的、專業的PDF文件，並無縫地整合到現代的Blazor應用中。 無論您是在將HTML轉換為PDF、建立表單，還是在組織複雜文件，IronPDF都提供了企業級的PDF處理工具。

準備好在您的Blazor專案中實現PDF功能嗎？ 立即開始您的IronPDF免費試用。 試用版包含完整功能，沒有浮水印，並提供綜合支持以確保您的成功。 對於生產部署，探索我們的授權選項和不同平台的部署指南，包括Windows、Linux和Azure。

常見問題

我如何能使用Blazor在新標籤頁中打開PDF？

您可以使用IronPDF生成PDF並使用JavaScript互操作在新的瀏覽器分頁中顯示該PDF於Blazor中。

IronPDF在Blazor應用程式中扮演什麼角色？

IronPDF用於Blazor應用程式中生成PDF文件，允許開發者在應用程式中程式化建立和操作PDF。

為什麼在Blazor中利用JavaScript互操作來打開PDF？

JavaScript互操作用於Blazor中與瀏覽器功能互動，比如打開新的標籤，這對於以使用者友好的方式顯示IronPDF生成的PDF是必要的。

我可以在Blazor Server應用程式中實現PDF查看功能嗎？

可以，您能在Blazor Server應用程式中使用IronPDF生成PDF並利用JavaScript互操作將其在新標籤中打開，以達到無縫的使用者體驗。

在Blazor應用程式中在新標籤中打開PDF有哪些優勢？

在新標籤中打開PDF可以增強使用者體驗，讓使用者在不離開當前頁面的情況下瀏覽文件，同時保持應用程式狀態不變。

在Blazor中使用IronPDF可以自訂PDF輸出嗎？

是的，IronPDF允許您在Blazor應用程式中自訂PDF輸出，包括設置標頭、頁尾和應用樣式以符合特定設計要求。

打開PDF的教程使用的是哪個版本的Blazor？

該教程專注於Blazor Server版本，演示如何使用IronPDF和JavaScript互操作在新標籤中打開PDF。

在Blazor中使用IronPDF如何改善文件處理？

在Blazor中使用IronPDF提高文件處理，提供強大的PDF生成和操作能力，使開發者能直接由應用程式建立專業品質的PDF。

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

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

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

相關文章

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

Iron 支援團隊

我們線上24小時，每週5天。
聊天
電子郵件
給我打電話