a元素的download属性

之前一直使用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

       https://juejin.im/post/5b30d1c7e51d455e2c32f9b0

       https://blog.csdn.net/qq_35661171/article/details/79242114