a元素的download属性

之前一直使用php插件完成文件下载功能&＃xff0c;今天看项目代码的时候&＃xff0c;看到可以通过a的download属性进行下载&＃xff0c;代码如下&＃xff1a;

html部分代码&＃xff1a;

download

 js部分代码&＃xff1a;

function downloadData(){// 使用a的download属性下载文件var filename &＃61; &＃39;文件名称&＃39;;var data &＃61; &＃39;数据&＃39;;var blob &＃61; new Blob([data],{type:&＃39;application/vnd.ms-excel&＃39;})var a &＃61; document.createElement(&＃39;a&＃39;);//创建a元素a.href &＃61; URL.createObjectURL(blob);a.download &＃61; filename;a.click();//触发a的点击事件//URL.revokeObjectUrl(a.href)a &＃61; null;
}

chrome上使用这段代码可以正常运行并下载文件&＃xff1b;可是在firefox上使用&＃xff0c;无法下载文件。

本来想用phpexcel插件来改写该功能的&＃xff0c;想想&＃xff0c;毕竟项目要求没那么高&＃xff0c;还是再找找看有什么好的解决方案。

刚好找到一个方法&＃xff0c;试了试&＃xff0c;修改代码如下(使用jq改写的代码没有效果&＃xff0c;火狐无法触发点击事件)&＃xff1a;

download


//以下使用jq写法&＃xff0c;使用前请先引入jQuery。
function downloadData(){var filename &＃61; &＃39;文件名称&＃39;;var data &＃61; &＃39;数据&＃39;;var blob &＃61; new Blob([data],{type:&＃39;application/vnd.ms-excel&＃39;})$(&＃39;#dd&＃39;).attr(&＃39;href&＃39;,URL.createObjectURL(blob));$(&＃39;#dd&＃39;).attr(&＃39;download&＃39;,filename);$(&＃39;#dd&＃39;).trigger(&＃39;click&＃39;);
}

继续寻找其他方法&＃xff0c;代码如下(貌似火狐没发现报错信息)&＃xff1a;

download

function downloadData(){var data &＃61; &＃39;数据&＃39;;var blob &＃61; new Blob([data],{type:&＃39;application/vnd.ms-excel&＃39;})var a &＃61; document.createElement(&＃39;a&＃39;);//创建元素var event &＃61; new MouseEvent(&＃39;click&＃39;);a.download &＃61; &＃39;文件名称&＃39;;a.href &＃61; URL.createObjectURL(blob);a.target &＃61; &＃39;_blank&＃39;;a.dispatchEvent(event);//分发事件
}

接下来通过window.navigator.userAgent来判断浏览器类型&＃xff0c;比如判断是否是火狐浏览器:

var explorer &＃61;window.navigator.userAgent ;if(explorer.indexOf("Firefox")>&＃61;0){return &＃39;火狐&＃39;;}

参考https://segmentfault.com/q/1010000011634405/a-1020000011684880

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

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