背景
测试发现,使用Firefox浏览器导出文件时,没有反应。查了一下,原来使用Ajax去Get调用服务端接口,返回了一个csar文件,FireFox没有弹出保存文件的对话框或者自动保存文件,按F12发现有请求,也正常返回了Blob文件流。
并且在Chrome下面是正常的。
原因
Firefox不兼容导致的。
方案
最好的方案就是使用H5的新特性,a
标签的download
attribute。
可以创建a标签配合download属性
<a href="xxx/xxx/xx.xx" download="filename">
可以使用iframe.
有时候并没有固定哪个URL,可能要服务端动态处理:
function download(url){
var iframe = document.createElement("iframe")
iframe.style.display = "none";
iframe.src = url;
document.body.appendChild(iframe);
}
- 通过Ajax请求
有时候有IFrame限制,比如服务端不允许在IFrame中访问
fetch('http://somehost/somefile.zip').then(res => res.blob().then(blob => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'myfile.zip';
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}))