之前一直使用php插件完成文件下载功能,今天看项目代码的时候,看到可以通过a的download属性进行下载,代码如下:
html部分代码:
<a onclick='downloadData'>download</a>
js部分代码:
function downloadData(){
// 使用a的download属性下载文件
var filename = '文件名称';
var data = '数据';
var blob = new Blob([data],{type:'application/vnd.ms-excel'})
var a = document.createElement('a');//创建a元素
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();//触发a的点击事件
//URL.revokeObjectUrl(a.href)
a = null;
}
chrome上使用这段代码可以正常运行并下载文件;可是在firefox上使用,无法下载文件。
本来想用phpexcel插件来改写该功能的,想想,毕竟项目要求没那么高,还是再找找看有什么好的解决方案。
刚好找到一个方法,试了试,修改代码如下(使用jq改写的代码没有效果,火狐无法触发点击事件):
<a onclick='downloadData'>download</a>
<a id='dd' style='display:none;'></a>
//以下使用jq写法,使用前请先引入jQuery。
function downloadData(){
var filename = '文件名称';
var data = '数据';
var blob = new Blob([data],{type:'application/vnd.ms-excel'})
$('#dd').attr('href',URL.createObjectURL(blob));
$('#dd').attr('download',filename);
$('#dd').trigger('click');
}
继续寻找其他方法,代码如下(貌似火狐没发现报错信息):
<a onclick='downloadData'>download</a>
function downloadData(){
var data = '数据';
var blob = new Blob([data],{type:'application/vnd.ms-excel'})
var a = document.createElement('a');//创建元素
var event = new MouseEvent('click');
a.download = '文件名称';
a.href = URL.createObjectURL(blob);
a.target = '_blank';
a.dispatchEvent(event);//分发事件
}
接下来通过window.navigator.userAgent来判断浏览器类型,比如判断是否是火狐浏览器:
var explorer =window.navigator.userAgent ;if(explorer.indexOf("Firefox")>=0){return '火狐';}
参考https://segmentfault.com/q/1010000011634405/a-1020000011684880