如何使用 Blazor 呈现知道其内容类型的字节数组？答案

【问题标题】：How to render byte array knowing its content-type using Blazor?如何使用 Blazor 呈现知道其内容类型的字节数组？
【发布时间】：2020-08-03 07:26:09
【问题描述】：

以下代码对应于 Blazor 服务器端页面：

@page "/ShowFile/{Id:guid}" //// 放在这里让浏览器渲染存储在 this.Model 上的字节数组 //// 还有如何指定响应的内容类型？ @代码 { [范围] 公共指导 ID { 获取；放; } 私有字节 [] 模型 { 获取；放; } 受保护的覆盖异步任务 OnInitializedAsync() { 等待 base.OnInitializedAsync(); //// 根据标识符获取文件的字节数组。 this.Model = 等待 this.GetFile(this.Id).ConfigureAwait(false); } }

在 ASP.NET MVC 中，我曾经在控制器操作中这样做：

this.Response.ContentType = "应用程序/pdf"; //// 假设字节数组代表一个PDF文档。等待 this.Response.Body.WriteAsync(this.Model);

如何让浏览器根据其内容类型在我的页面中呈现字节数组？

【问题讨论】：

您找到有效的解决方案了吗？
@zsolt-bendes 回答有所帮助，但我将应用程序中的方法更改为不使用它。
是的，我得到了如下所示的工作，但我只想将 PDF 字节数组刷新到浏览器中的新文档下载中。

标签： arrays rendering blazor

【解决方案1】：

@page "/test"
@inject HttpClient Http

@if (!string.IsNullOrEmpty(pdfContent))
{
    <embed src="@pdfContent" width="800px" height="2100px" />
    <iframe src="@pdfContent" width="800px" height="2100px" />
    <object data="@pdfContent" width="500" height="200"></object>
}


@code {
    string pdfContent = "";

    protected async override Task OnInitializedAsync()
    {
        var data = await Http.GetByteArrayAsync("the source you pdf");

        pdfContent = "data:application/pdf;base64,";
        pdfContent += System.Convert.ToBase64String(data);
    }
}

我在客户端 blazor 上试过这个，它在那里工作。在服务器端试一试。

【讨论】：

是的，该代码写入了数组的所有字节，但这并不意味着它将呈现该数组所代表的文档。我的意思是，该字节数组是一个序列化的 PDF 文档。浏览器应使用正确的响应内容类型呈现 PDF。
我现在更好地理解了这个问题。以前从未尝试过。你试过<embed src="file_name.pdf" width="800px" height="2100px" /> 吗？
我无法尝试，因为我没有PDF文档，我有的是它的字节数组序列化。
Http.GetByteArrayAsync 得到一个字节数组。来源应该无关紧要。

【解决方案2】：

我设法通过Zsolt Bendes' 回答在服务器端 Blazor 上工作。获得 Base64 字符串后，我必须使用 StateHasChanged() 重新渲染页面。

@page "/Document/Open/{documentId:int}"

@if (!string.IsNullOrEmpty(pdfContent))
{
    <embed src="@pdfContent" width="800px" height="2100px" />
    <iframe src="@pdfContent" width="800px" height="2100px" />
    <object data="@pdfContent" width="500" height="200"></object>
}


@code {
    [Parameter]
    public int DocumentId { get; set; }
    string pdfContent = "";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var apiService = await CreateClient();
            var data = await apiService.Open(DocumentId);
            pdfContent = "data:application/pdf;base64,";
            pdfContent += System.Convert.ToBase64String(data);
            StateHasChanged();

        }
    }
}

第一次呈现页面时，我创建了一个服务实例，该实例在其构造函数中采用 HTTP 客户端。然后我调用 Open 方法，它从 Azure Blob 存储返回字节数组。

【讨论】：

如果您在页面上使用任何 JS 互操作命令，这应该可以工作。