目前使用FileReader打开并查看适用于Chrome的PDF。但是,当在Safari上打开pdf并单击下载按钮时,没有任何反应。
var reader = new FileReader();
reader.onloadend = function(e) {
$window.location.href = reader.result;
}
reader.readAsDataURL(file);
答案 0 :(得分:7)
在花了一整天的时间处理类似问题之后,我明白了问题所在,所以我现在可以与你分享我的知识。
基本上,当您在已打开的浏览器选项卡中呈现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时,您将丢失缓存。
现在一切都正常吗?
您唯一能想到的就是在新标签页中打开Blob网址:
window.open(fileBlob, '_blank');
问题解决了。
答案 1 :(得分: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或任何您喜欢的东西。