Blazor : embed shows pdf correctly in Firefox, but empty in Chrome and Edge

Question

I'm using "embed" to show pdf file in Razor component of Blazor Server

<embed src="@showedPdfContent" visible="false" width="1100" height="730" type="application/pdf"/>

public void SetPdfContent(byte[] content)
{
    showedPdfContent = $"data:application/pdf;base64,{Convert.ToBase64String(content)}";
    StateHasChanged();
}

when I run with Firefox, it works correctly to show pdf file. But, when I run with Chrome or Edge, it shows empty.

embed in chrome

I tried to use "object" or "iframe". But they also didn't work as well. Any ideas to this issue?

Answer 1

A iframe, objector embed didn't worked for me in chrome.

As a workaround u can use the Microsoft.JSInterop.IJSRuntime. Convert the pdf to a base64 string and load it with pdf.js.

A example