Blazor：嵌入在 Firefox 中正确显示 pdf，但在 Chrome 和 Edge 中为空答案

【问题标题】：Blazor : embed shows pdf correctly in Firefox, but empty in Chrome and EdgeBlazor：嵌入在 Firefox 中正确显示 pdf，但在 Chrome 和 Edge 中为空
【发布时间】：2023-02-25 02:51:49
【问题描述】：

我正在使用“嵌入”在 Blazor Server 的 Razor 组件中显示 pdf 文件

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

当我使用 Firefox 运行时，它可以正常显示 pdf 文件。但是，当我使用 Chrome 或 Edge 运行时，它显示为空。

embed in chrome

我尝试使用“对象”或“iframe”。但他们也没有工作。对这个问题有什么想法吗？

【问题讨论】：

我尝试用 iframe 包装：<iframe src="@showedPdfContent" type="application/pdf" width="750px" height="750px"> <embed src="@showedPdfContent" visible="false" width="1100" height="730" type="application/pdf"/> </iframe>。但它仍然没有用。
我尝试将字节数组写入临时 pdf 文件，通过 Embed 查看文件并且它有效。我不知道为什么它不适用于 base64：Convert.ToBase64String(content)
我尝试使用 Fiddle 和我的 pdf base64 内容浏览 jsfiddle.net/fhd30bko 。它有效。我不知道为什么它不适用于 Google Chrome / Edge。
我认为它与 Blazor 无关。但是，当我用 Firefox 打开 jsfiddle.net/fhd30bko 时，它工作正常。但是，对于 Chrome，pdf 内容显示为空白。
嗨@Quang Vinh Tran，只是想知道你是否让这个在 Chrome 中工作？在这里有同样的问题

标签： pdf base64 blazor embed

【解决方案1】：

iframe、object或embed 在 chrome 中对我不起作用。

作为解决方法，您可以使用Microsoft.JSInterop.IJSRuntime。将 pdf 转换为 base64 字符串并使用 pdf.js 加载它。

A example

【讨论】：