Question

它适用于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网址，它确实可以正常工作：

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

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

Answer 1

我回答这个问题可能有点晚了，但是当我在Safari上使用iframe从Blob网址预览PDF时，我遇到了同样的问题。 FileReader帮了我大忙。从您的代码中，而不是使用window.URL.createObjectURL(pdf)，而是通过FileReader来读取pdf，如下所示：

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网址，对于Safari使用此技巧。

Safari iframe中的“ application / pdf” blob无法显示，但blob网址在Safari中的单独标签中起作用

1 个答案: