Blazor WebAssembly中如何在新标签页打开文件流？

方法一：直接使用HTML 标签（最简单） #

如果你的API不需要额外前置逻辑（比如权限验证），直接用<a>标签指向API地址，设置target="_blank"就能在新标签页打开PDF：

<!-- 无参数情况 -->
<a href="/api/PdfGenerator" target="_blank" class="btn btn-primary">打开PDF</a>

<!-- 带参数情况，比如传递文档ID -->
<a href="/api/PdfGenerator?documentId=@YourDocumentId" target="_blank" class="btn btn-primary">打开PDF</a>

这种方式由浏览器直接发起请求，自动处理PDF展示，无需额外JS或C#逻辑。

方法二：通过C#逻辑+JS处理（适合需要前置操作的场景） #

如果需要先执行Blazor逻辑（比如验证权限、组装参数），再打开PDF，可以结合HttpClient和IJsRuntime实现：

步骤1：Blazor组件代码 #

@inject HttpClient Http
@inject IJsRuntime jsRuntime

<button @onclick="OpenPdfInNewTab" class="btn btn-primary">打开PDF</button>

@code {
    private async Task OpenPdfInNewTab()
    {
        // 调用API获取PDF字节数组
        var pdfBytes = await Http.GetFromByteArrayAsync("/api/PdfGenerator");
        
        // 调用JS方法处理字节数组并打开
        await jsRuntime.InvokeVoidAsync("openPdfFromBytes", pdfBytes);
    }
}

步骤2：添加JS方法 #

在wwwroot/index.html（WebAssembly）或Pages/_Layout.cshtml（Server）的<script>标签中添加以下JS代码：

function openPdfFromBytes(pdfBytes) {
    // 将字节数组转换为PDF格式的Blob
    const pdfBlob = new Blob([pdfBytes], { type: "application/pdf" });
    // 创建临时URL指向Blob
    const blobUrl = URL.createObjectURL(pdfBlob);
    // 在新标签页打开URL
    window.open(blobUrl, "_blank");
    // 延迟释放临时URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
}

方法三：处理需要授权头的API #

如果API需要携带授权头（比如Bearer Token），<a>标签无法直接设置请求头，可通过HttpRequestMessage手动添加头信息：

@inject HttpClient Http
@inject IJsRuntime jsRuntime
@inject ITokenProvider TokenProvider // 假设你有获取Token的服务

<button @onclick="OpenPdfWithAuth" class="btn btn-primary">打开带授权的PDF</button>

@code {
    private async Task OpenPdfWithAuth()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, "/api/PdfGenerator");
        // 添加授权头
        var token = await TokenProvider.GetTokenAsync();
        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
        
        // 发送请求并获取响应
        var response = await Http.SendAsync(request);
        response.EnsureSuccessStatusCode(); // 确保请求成功
        
        var pdfBytes = await response.Content.ReadAsByteArrayAsync();
        await jsRuntime.InvokeVoidAsync("openPdfFromBytes", pdfBytes);
    }
}

为什么你的原代码无效？ #

你之前的代码jsRuntime.InvokeVoidAsync("open", "File_Stream", "_blank")无效，是因为"File_Stream"不是浏览器可识别的有效URL或资源路径，浏览器无法定位到对应的PDF资源。

内容的提问来源于stack exchange，提问作者lokanath das