我的 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"

您需要輸入許可證密鑰才能解鎖所有功能。 IronPDF 可與Blazor Server 應用程式無縫協作，為現代 Web 應用程式提供強大的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 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>

JavaScript 函數 window.openPdfInNewTab 對於從伺服器開啟新分頁至關重要。 它從 Blazor 伺服器接收 Base64 字串形式的 PDF 數據，客戶端程式碼將其轉換為二進位物件。 這種方法類似於將 PDF 轉換為 Base64 ，但方向相反，使瀏覽器能夠顯示 PDF 內容。

然後使用此資料塊建立臨時 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 函數，為使用者開啟文件。 這種模式在 Web 應用程式中將URL 轉換為 PDF時特別有用。 對於更複雜的場景，您可能需要實現非同步 PDF 生成以獲得更好的效能。

考慮實施自訂日誌記錄，以追蹤 PDF 產生活動並排查問題。 您也可以新增浮水印或頁眉頁腳來美化您的 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; }}
                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

GenerateFromHtml 方法示範了 IronPDF 如何從動態產生的 HTML 標記而不是現有 URL 產生 PDF。 它會建立一個完整的 HTML 字串，其中包含標題、內容和動態資料。 RenderHtmlAsPdf方法可以無縫地處理轉換。 這種方法非常適合使用來自資料庫或 API 的動態資料建立 PDF 報告。

您可以使用DataURIs透過自訂字體、響應式 CSS甚至嵌入圖像來增強 HTML 內容。 對於複雜的佈局，可以考慮使用Bootstrap 和 Flexbox來確保渲染效果的一致性。

在處理國際語言時，IronPDF 提供出色的Unicode 支持，確保不同語言和文字的字元正確顯示。您還可以控制分頁符號並自訂紙張尺寸，以滿足特定的文件需求。

我應該處理哪些常見問題？

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

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

除了 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 互通方法的動態產生功能。 對於更進階的場景，可以考慮實作專用的PDF 檢視元件，或使用MemoryStream來提供 PDF 檔案而無需儲存到磁碟。

您也可以考慮將 PDF 檔案儲存到 Azure Blob Storage 等雲端儲存體中，以獲得更好的可擴充性。 對於需要離線存取的應用，可以考慮在新增標籤頁功能的同時實作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）的授權選項和部署指南。