需求:后端提供下载url,前端实现文件网页端单文件下载及批量下载:
1.单文件下载:直接使用a标签,download属性还可以修改文件名称,但跨域的时候,该文件名称不起作用。如以下代码所示:
<!--未跨域的情况可以修改文件名称为test.gif-->
<a href="index_logo.gif" download="test.gif">下载</a>
<!--跨域情况修改文件名失败,下载的文件是一串字符名称-->
<a href="http://www.baidu.com/xxxxxxx.png" download="test.png">下载</a>
解决办法:跨域的时候,可以禁用a标签的点击事件,选择右键另存为,则可以修改下载文件的名字。
//禁用单文件下载单击事件
var function = forbidSingleDownloadClick(e){
e.preventDefault();
}
2.批量下载,通过打开新的窗口下载文件,有时候会遇到用户拦截弹窗的情况,所以如果批量下载只能下载一个文件,可以查看下chrome浏览器弹窗设置是否开启
//downloadUrlArray是一个包含下载url的数组
downloadUrlArray.forEach(function(item) {
var newWindow = window.open();
setTimeout(function() {
newWindow.location = item;
setTimeout(function() {
newWindow.close();
}, 1000);
}, 1000);
});
具体位置:chrome://settings/content/popups,弹出窗口设置为允许即可。
更多相关下载文章:
http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/