如何使用Blazor在新标签中打开PDF？

您可以通过使用IronPDF生成PDF和使用JavaScript互操作在新浏览器标签中显示它来在Blazor中打开PDF。

IronPDF在Blazor应用中的作用是什么？

IronPDF在Blazor应用中用于生成PDF文档，允许开发者在其应用程序中编程地创建和操作PDF。

为什么在Blazor中使用JavaScript互操作来打开PDF？

在Blazor中使用JavaScript互操作是为了与浏览器功能交互，例如打开新标签，这是以用户友好的方式显示由IronPDF生成的PDF所必需的。

我可以在Blazor Server应用中实现PDF查看吗？

是的，您可以通过使用IronPDF生成PDF和JavaScript互操作在新标签中打开它来在Blazor Server应用中实现PDF查看，从而实现无缝用户体验。

在Blazor应用中在新标签中打开PDF有什么好处？

在新标签中打开PDF可以增强用户体验，让用户在不离开当前页面的情况下查看文档，同时保持应用程序状态完好。

使用IronPDF能否在Blazor中自定义PDF输出？

可以，IronPDF允许您在Blazor应用中自定义PDF输出，包括设置页眉、页脚以及应用样式以满足特定设计要求。

在教程中使用哪个版本的Blazor来打开PDF？

教程着重于Blazor Server版本，演示如何使用IronPDF和JavaScript互操作在新标签中打开PDF。

使用IronPDF如何改善Blazor中的文档处理？

在Blazor中使用IronPDF通过提供强大的PDF生成和操作能力改善文档处理，使得从应用中直接创建专业质量的PDF变得容易。

Can I generate PDFs from dynamic HTML content using IronPDF in Blazor?

Yes, IronPDF can generate PDFs from dynamic HTML by using the 'RenderHtmlAsPdf' method, allowing you to include dynamically generated data and styles in your documents.

Why is error handling important in PDF generation for Blazor applications?

Proper error handling ensures that any issues during PDF generation are communicated clearly to users, enhancing user experience and allowing developers to troubleshoot and resolve problems efficiently.

C# PDF库

Explore IronPDF 免费试用

HTML到PDF

Online Demo 查看所有%s代码示例

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

PM >Install-Package IronPdf

Install-Package IronPdf

使用IRONPDF

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

Curtis Chau

Updated: 2026年4月23日

要从 Blazor Server 应用程序在新浏览器标签页中打开 PDF，可以使用 IronPDF 进行服务器端 PDF 生成，并结合 JavaScript 互操作来处理客户端窗口管理，从而解决跨边界通信的难题。

在一个新的浏览器选项卡中打开PDF文档是Blazor网络应用程序的常见需求。本教程演示如何使用 IronPDF 生成 PDF 文件，并使用 JavaScript 互操作在新标签页中显示它们，从而为用户提供无缝的文档查看体验。此示例专注于Blazor Server版本。

我的 Blazor 项目需要哪些先决条件？

首先在Visual Studio 2022中创建一个新的Blazor Server项目。通过NuGet包管理器控制台安装IronPDF：

PM > Install-Package IronPdf

Install-Package IronPdf

在Program.cs中配置您的IronPDF许可证以启用全部功能：

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

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>

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;
        }
    }
}

@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;
        }
    }
}

Text

此代码块定义了主要的交互页面。 Razor标记创建了一个简单的用户界面，包括URL输入字段和一个按钮。 C#的ChromePdfRenderer实例从用户提供的URL生成PDF。渲染选项允许您自定义边距、启用JavaScript 渲染以及设置动态内容的渲染延迟。

然后将生成的PDF字节数组转换为Base64字符串，并使用@inject IJSRuntime JS调用JavaScript函数，为用户打开文档。这种模式在 Web 应用程序中将URL 转换为 PDF时特别有用。对于更复杂的场景，您可能需要实现异步 PDF 生成以获得更好的性能。

考虑实施自定义日志记录，以跟踪 PDF 生成活动并排查问题。您还可以添加水印或页眉页脚来美化您的 PDF 文件。

用户界面长什么样？

简单的网络表单，带有URL输入字段，预填为'https://ironpdf.com'和一个'生成并打开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");
}

GenerateFromHtml方法演示了IronPDF如何从动态生成的HTML标记而不是现有URL生成PDF。它构造了一个完整的HTML字符串，包含标题、内容和动态数据。 RenderHtmlAsPdf方法可以无缝地处理转换。这种方法非常适合使用来自数据库或 API 的动态数据创建 PDF 报告。

您可以使用DataURIs通过自定义字体、响应式 CSS甚至嵌入图像来增强 HTML 内容。对于复杂的布局，可以考虑使用Bootstrap 和 Flexbox来确保渲染效果的一致性。

在处理国际语言时，IronPDF 提供出色的Unicode 支持，确保不同语言和文字的字符正确显示。您还可以控制分页符并自定义纸张尺寸，以满足特定的文档需求。

更新后的用户界面是什么样子的？

两个表单部分显示从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;
}

services.AddMemoryCache()
' 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

services.AddMemoryCache()
' 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

为了获得最佳的大文件浏览性能，请考虑使用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 Storage 等云存储中，以获得更好的可扩展性。对于需要离线访问的应用，可以考虑在新增标签页功能的同时实现PDF 下载功能。

我应该遵循哪些最佳实践？

1.**错误处理：**将 PDF 生成过程封装在 try-catch 块中，并添加有意义的错误消息。使用自定义错误日志跟踪问题。

2.**性能：**使用 async/await 防止 UI 阻塞。对 JavaScript 代码较多的页面实现渲染延迟。预热引擎以加快初始渲染速度。

3.**用户体验：**显示加载指示器并优雅地处理弹出窗口拦截器。跟踪多页PDF的进度。针对网络问题提供清晰的反馈。

**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）的许可选项和部署指南。