HTML5 a标签url下载文件

需求：后端提供下载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/2016/04/know-about-html-download-attribute/

http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/