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

【问题标题】：HTML set a blob (PDF) url in an iframe doesn't work on mobileHTML 在 iframe 中设置 blob (PDF) url 在移动设备上不起作用
【发布时间】：2022-11-24 11:06:01
【问题描述】：

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

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 mobile (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

// screenshot has been lost in the edit

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

【问题讨论】：

我在 mozilla 上取得了成功 pdf.js 对我来说无处不在
第二次投票给 pdf.js
@Bravo 你应该发布一个答案，这样你就可以获得这个赏金的荣誉 - 你是第一个建议 pdf.js 的人。

标签： javascript html iframe mobile blob

【解决方案1】：

Chrome 桌面使用捆绑的 Foxit 协作真正的 PDF 查看器插件。如果在 Chrome 外部或作为服务嵌入的网络端，Firefox 中使用的其他更轻量级外部查看器或更轻量级 .js pdf 相似图像/html 查看器可能会起作用。 Google Docs 使用更轻量级的 js 混合查看器，例如 Mozilla PDF.js

来自OP链接

Alex Russell
Works at Google Chrome
, 谷歌前高级软件工程师
作者有 89 个答案和 581.6K 的答案浏览量8y

Chrome 和 Chrome for Android 有什么区别？
它们是从相同的代码库构建的，因此说它们非常不同是错误的。也就是说，历史上存在一些与更容易消耗内存和 CPU 的事物相关的分歧，导致 chrome-for-android 启动更少的进程，不用插件就可以了，等等。但是，如果 Web 内容在 Chrome 上运行，则在大多数情况下，它应该在 Chrome-for-Android 上运行 (TM)。

【讨论】：

【解决方案2】：

我预计您会遇到一些奇怪的安全问题。与其使用 iFrame，不如尝试在主页中使用 viewer.js 或 pdf.js。

【讨论】：