How to render byte array knowing its content-type using Blazor?

Question

The following code corresponds to a Blazor server-side page:

    @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); 
        }
    }

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

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

What can I do to let the browser to render the byte array in my page based on its content types?

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);
    }
}

I tried this with client side blazor and it works there. Give it a try with server side.

Answer 2

I managed to get this working on server-side Blazor from Zsolt Bendes' answer. Once I get the Base64 string, I had to re-render the page using 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();

        }
    }
}

The first time the page renders, I create an instance of a service that takes an HTTP client in its constructor. I then call the method Open, which returns the byte array from Azure Blob Storage.