web前端批量文件下载

[damoclesX]

近日遇到一需求，pc站点资源批量下载

后端处理方式？

资源存放在七牛上面，七牛没有提供直接的批量下载接口
服务器在阿里云，想要打包下载，首先需要先下载存放在七牛的资源，再在后台处理打包，再把打包好的资源返回给用户。这不可行，资源都是音频资源，文件都比较大，在服务器端处理打包，服务器扛不住。需要下载两次文件，一次是从七牛到服务器，第二次是从服务器到浏览器，反应很慢。

前端处理设想

ps：单文件下载处理方式，创建iframe，下载时设置iframe的src

1.利用迅雷的批量下载功能，需要用户安装迅雷，浏览器兼容性较差
2.把下载地址呈现给用户，让用户自己自行下载，体验不好？
3.同单文件下载方式一致，监听iframe的load事件，在load时，替换src属性，下载另外一个文件？
4.因为资源在七牛，支持跨域访问，用ajax请求资源，在响应完成时下载文件。

前端处理实践

先不考虑
1，这种强迫用户干啥干啥的设计简直不能忍。

2也暂不考虑，这是没有办法的办法。

3在实践过程中发现这是有问题的，将iframe的src设置为响应头中带有Content-Disposition（下载头）的url，无法监听iframe的load事件，load事件不会触发，也就无法进行下一个文件的下载了

那就只剩4了，七牛资源返回头中有access-control-allow-origin:*，允许ajax跨域读取，responseText就是音频的文本内容。这里就有两种处理方式，3中既然没法监听iframe的load事件，那就监听ajax的响应成功事件，在ajax请求成功，收到响应时，利用单文件处理的方式，因为这时iframe的src已经用ajax请求了一次，有缓存，在请求成功后也能及时下载。还有一种处理方式，就是去处理ajax读取到的内容，这里就要用到blob、URL、Event新的api，和html5中a标签的download属性，支持IE10+浏览器

现代浏览器

var blob = new Blob([content]); //content为ajax请求道的responseText
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = fileName || 'download';
a.src = url;
var evt = new MouseEvent('click'); //在firefox中使用Event构造函数无法触发
a.dispatchEvent(evt);
URL.revokeObjectUrl(url); //释放url

IE10+浏览器

var blob = new Blob([content]); //content为ajax请求道的responseText
navigator.msSaveOrOpenBlob(blob, fileName || "download"); //IE私有方法

参考链接:
https://msdn.microsoft.com/zh-cn/library/hh779016(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
http://www.alloyteam.com/?s=%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD

[huyansheng3]

这样用户点击下载之后响应速度太慢了吧？ 必须得等到 ajax 下载文件完成后，再把 文件内容包装成 ObjectURL,模拟点击触发下载，此时才弹出下载提示框，用户可以接受吗？

[lmikoto]

@huyansheng3 不知道您有什么好的思路没