Question

目前使用FileReader打开并查看适用于Chrome的PDF。但是，当在Safari上打开pdf并单击下载按钮时，没有任何反应。

var reader = new FileReader();
reader.onloadend = function(e) {
    $window.location.href = reader.result;
}
reader.readAsDataURL(file);

Answer 1

在花了一整天的时间处理类似问题之后，我明白了问题所在，所以我现在可以与你分享我的知识。

基本上，当您在已打开的浏览器选项卡中呈现Blob时会生成此类问题，因此您的网页网址会发生变化：

blob:http://localhost:8080/9bbeffe1-b0e8-485d-a8bd-3ae3ad9a0a51

要求pdf的错误程序是这样的：

var fileBlob = new Blob([response.data], {type: 'application/pdf'}); window.location.hfref = fileBlob;

为什么这不起作用？好吧，你可以看到在页面上呈现的pdf，这样你就可能会认为你的pdf加载得很好。但是，如果您尝试刷新页面或在计算机上下载pdf，则无效。

WTH？所以，最初我真的在考虑浏览器周围的某种黑魔法，然后我发现了问题：该文件不存在，但其唯一的缓存存储在浏览器中。因此，当您生成blob并将当前选项卡重定向到指向生成的blob url时，您将丢失缓存。

现在一切都正常吗？

您在服务器上请求文件
浏览器将缓冲区存储在选项卡
您指向页面网址以阅读缓冲区
您会看到pdf，但同时又会丢失缓冲区信息

您唯一能想到的就是在新标签页中打开Blob网址：

window.open(fileBlob, '_blank');

问题解决了。

Answer 2

在经历了与@ andreasonny83答案相同的情况之后，再加上令人头疼的问题，即瞬间关闭了用window.open打开的选项卡的adblock，我找到了适合我的解决方案。不知道它是否可以在Safari中工作，因为我没有Mac来测试它。在Firefox和Chrome上尝试过。我敢肯定，如果它不能在IE或Safari上运行，则有一种解决方法。我所做的是使用 embed html5组件作为src，即一个 URL.createObject（blob）对象。这样，我便可以渲染/刷新并下载pdf。

  // pdfBlob is the pdf fetched from the API as a blob.
  pdf = URL.createObjectURL(pdfBlob)

然后您将pdf嵌入到embed标签中，如下所示：

<div style={{ width: '100%', height: '100%' }}>
    <embed src={pdf} type='application/pdf' width='100%' height='100%' />
</div>

关键是使用html5标签 embed 。效果很好。当然，您需要找到一种设置embed src 属性的方法。我正在使用react和redux，所以我使用jsx，但是您可以使用普通的javascript或任何您喜欢的东西。

无法在Safari上下载pdf blob网址

2 个答案: