如何在 Blazor Web Assembly 的新选项卡中打开文件流？

Question

我有一个场景，我有一个 API，它将返回 FileStream（具有 Content Type application/pdf）。单击按钮时，我需要调用 API 并获取文件流并在新选项卡中打开流。

尝试过“IJsRuntime”。但下面的代码似乎不起作用。还有其他方法可以处理这个问题吗？

jsRuntime.InvokeVoidAsync("open", "File_Stream", "_blank")

我是 Blazor 新手。

Answer 1

我已经从我这边尝试过。下面的方法对我有用。

在 Razor 页面中添加所需的按钮或标签，并添加 Onclick 事件处理程序代码以及 IjsRuntime 注入。

@inject IJSRuntime JSRuntime

<button @onclick="GetFilecontent">Click Here</button>


@code {

    private async Task GetFilecontent() 
    {
        var result = await Http.GetAsync("api/getFileBytes"); //Output should be FileContent
        var FileStream = result.Content.ReadAsByteArrayAsync().Result.ToArray();
        await JSRuntime.InvokeVoidAsync("openInNewTab",FileStream);
    }
}

openInNewTab 是 Js 函数，它将获取文件流并使用文件数组在新选项卡中呈现。

创建一个 HTML 文件，文件将在其中呈现。

    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        function openInNewTab(array) {
            // Create a Blob object from the array
            var file = new Blob([array], { type: 'application/pdf'});
            // Create a URL for the Blob
            var fileURL = URL.createObjectURL(file);
            // Open the URL in a new tab
            window.open(fileURL, '_blank');
        }
    </script>

文件将在新窗口中打开。