如何在 Blazor 中在新标签页中打开 PDF

先决条件和设置

首先在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

理解挑战

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>

<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. 错误处理：始终在try-catch块中包装PDF生成，并在出现问题时为用户提供有意义的错误信息。

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试用。 试用版包括无水印的完整功能和全面的支持，确保您的成功。