浏览器如何下载文件？ FireFox的兼容性

背景

测试发现，使用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);
}))