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

Question

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

<pre>
    @page "/ShowFile/{Id:guid}"
    
    //// What to put here to let the browser render the byte array stored on this.Model
    //// Also how to specify the content type of the response?
    
    @code
    {
        [Parameter]
        public Guid Id { get; set; }
    
        private byte[] Model { get; set; }
    
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            //// Gets the byte array of a file based on its identifier.
            this.Model = await this.GetFile(this.Id).ConfigureAwait(false); 
        }
    }
</pre>

In ASP.NET MVC I used to do it in the controller action as:

<pre>
    this.Response.ContentType = "application/pdf"; //// Assuming that byte array represents a PDF document.
    await this.Response.Body.WriteAsync(this.Model);
</pre>

我该怎么做才能让浏览器根据其内容类型在我的页面中呈现字节数组？

Answer 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 尝试了这个，它在那里工作。在服务器端尝试一下。