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

Posted 2023-03-27

【中文标题】如何使用 Blazor 呈现知道其内容类型的字节数组？

【英文标题】：How to render byte array knowing its content-type using 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 字节数组刷新到浏览器中的新文档下载中。

【参考方案1】：

@page "/test"
@inject HttpClient Http

@if (!string.IsNullOrEmpty(pdfContent))

    <embed src="@pdfContent"   />
    <iframe src="@pdfContent"   />
    <object data="@pdfContent"  ></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"   />
    <iframe src="@pdfContent"   />
    <object data="@pdfContent"  ></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 互操作命令，这应该可以工作。