safari iframe 中的“application/pdf”blob 不显示，但 blob url 在 safari 中的单独选项卡中工作答案

【问题标题】：'application/pdf' blob in safari iframe does not display, but the blob url works in a separate tab within safarisafari iframe 中的“application/pdf”blob 不显示，但 blob url 在 safari 中的单独选项卡中工作
【发布时间】：2019-05-27 20:20:10
【问题描述】：

它适用于 Edge、Chrome、Firefox，但不适用于 safari。在 Safari 中，iframe 看起来它知道它应该显示一个 pdf（灰色背景）但里面没有页面。

const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
setDataStreamURL(window.URL.createObjectURL(pdf))
...
<iframe title={iframeTitle} className={className} src={dataStreamURL} type={type} />

如果我给它一个像这样的 pdf 的 url，它确实可以正常工作：

https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf

但我需要给它blob:... 由window.URL.createObjectURL(pdf) 创建的网址

【问题讨论】：

标签： pdf iframe safari

【解决方案1】：

我回答这个问题可能有点晚了，但我在 Safari 上使用 iframe 从 blob url 预览 PDF 时遇到了同样的问题。 FileReader 为我做了诀窍。从您的代码中，不要使用window.URL.createObjectURL(pdf)，而是通过FileReader 读取此处为pdf 的blob，如下所示：

const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })

const reader = new FileReader();

reader.onload = () => {
const url = reader.result; // Use this `url` in iframe src
};

reader.readAsDataURL(pdf);

注意此技巧在 Safari 中有效，但在其他浏览器中可能无效，因此对其他浏览器使用 blob url，对 Safari 使用此技巧。

【讨论】：