HTML 在 iframe 中设置 blob (PDF) url 在移动设备上不起作用

Question

我使用 API 来获取生成的 PDF 或存储在私有目录中的 PDF（仅当用户登录时才可访问）。
我的端点发送一个带有Content-Type : application/pdf.
我在 React.js 应用程序上收到它，该应用程序URL.createObjectURL(blob)通过response.blob()使用fetch.
当我将其推送到 iframe 中时<iframe src={blobUrl} type="application/pdf"></iframe>，它可以在桌面浏览器上运行，但不能在移动浏览器上运行。
它甚至不适用于响应模式下的 chrome 检查器。
但是，当我使用该代码下载它时，它可以在移动设备上运行：

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style = 'display: none';
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();

而且，当我这样做时console.log(blobUrl)，网址在https上很好：blob:https://{domain}.com/00457da4-a423-44ea-a26b-a65f7ec17e42

有人知道如何在 iframe 中显示 PDF 以在移动设备上预览吗？

[编辑] 令人惊讶的是，它可以在 Safari 移动版（IOS）上运行

[编辑2]我检查了chrome桌面，发现了这个：

<embed type="application/x-google-chrome-pdf" src="chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/602420b2-c69b-486d-99f9-ece26af579be" original-url="blob:https://{domain}.com/c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">

所以我认为查看 PDF 的能力来自 Chrome 桌面中的“影子”扩展，这就是我们在移动设备上看不到它的原因。Chrome 移动版不具备扩展程序兼容性。

此处确认： https: //www.quora.com/Why-does-Chrome-on-Android-not-open-PDF-files-like-Chrome-on-Windows-Linux-can

// 屏幕截图在编辑中丢失了

[![在此处输入图像描述][1]][1]

Answer 1

我希望您\xe2\x80\x99 遇到一些奇怪的安全问题。您可以尝试使用viewer.js或pdf.js，而不是使用iFrame您可以尝试在主页中

\n