公司有个需求,就是点击下载附件,批量下载用户上传的附件
开始想法1:
从文件服务器把这些文件下载下来,后台压缩成一个zip文件下载,后来发现有个问题,就是很多用户同时下载的话,会在后台同时生成很多个临时zip 下载完后还得 一一删除,这种方法肯定是臃肿的。(重复性工作),或者把用户的文件压缩一次,在上传到服务器,这样服务器文件也会重复。又或者把用户的附件压缩上传,不保留他的多个附件,只有一个zip文件存于服务器,这样用户就不能预览他的附件,想要预览的话 还得解压,删除他多个附件里面的任意一个或添加一个 ,还得解压后在删除他想要删除的附件,在进行压缩上传。
所以我直接在浏览器实现多个文件多次弹窗下载。
看了很多方法 最后找到了 jquery.fileDownload.js 这个js文件
官网地址
https://www.bootcdn.cn/jquery.fileDownload/
我的使用为
在js中
//imgArr为图片地址的一个数组
for (var i = 0; i < imgArr.length; i++) {
if (imgArr[i] != "") {
var url = "/permitted/downloadAll?url="+imgArr[i];
$.fileDownload(url,{
httpMethod: 'GET',
//同时上传表单数据
data:$("#file-down").serialize(),
prepareCallback:function(url){
console.log("下载开始,请稍等!");
},
successCallback:function(url){
console.log("下载成功!");
},
failCallback: function (html, url) {
var json = JSON.parse(html);
console.log(json);
if(json.status == 512){
console.log(json.errorMessage);
}
}
});
}
}
在下载图片的控制器中添加如下代码
//jQuery以此判断下载是否成功。如果不添加上面的语句,则successCallback回调函数失效
response.setHeader("Set-Cookie", "fileDownload=true; path=/");
下面为转载的其他使用方法
//生成一个txt的文件,讲字符串变量 str 的内容放在里面,并完成下载
var str = "hello world可以中文吗?答案:可以的";
download(str, "Text.txt", "text/plain");
//也将生成一个txt文件,和上面的结果是一摸一样
str = "data:text/plain,hello%20world";
download(str, "dlDataUrlText.txt", "text/plain");
//将数组或者json对象写入到文件中
var debug = {hello : "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)]);
download(blob, "dlTextBlob.txt", "text/plain");
var str= "hello world", arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
arr[b]=a.charCodeAt();
});
download( arr, "textUInt8Array.txt", "text/plain" );
//将html页面中的一部分生成单独的 html文档
download(document.body.outerHTML, "dlHTML.html", "text/html");
//给字符串添加标签,或者html片段直接给方法,将会生成对应内容的文件
download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
//将ajax查询回来的结果,赋值给文件,并下载
$.ajax({
url: "/download.html",
success: download.bind(true, "text/html", "dlAjaxCallback.html")
});
//将图片的base64装入到图片中并下载。
download("data:image/gif;base64,R0lGODlhRgAvRm3T6GneSX3bBt5VeOjDemfLFv1XOW7kncvKdZi7t/S7e2M3LkscLcvH3LF7HwSuVeZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==", "dlDataUrlBin.gif", "image/gif");
//使用xhr获取本域名下文件,并封装到文件进行下载。这里的前提是xhr访问的文件必须和该程序执行在同一域名下,
//否则会报跨域的问题。比如此程序执行在localhost下面,而这里的访问地址使用的是http://danml.com,就会访问不成功。
var x=new XMLHttpRequest();
x.open("GET", "http://danml.com/wave2.gif", true);
x.responseType = 'blob';
x.οnlοad=function(e){
download(x.response, "dlBinAjax.gif", "image/gif" );
};
x.send();
扩展:还可以使用文件上传再下载进行测试。
<input id="file" type="file" οnchange="download(this.files[0], this.files[0].name, this.files[0].type)">