今天项目经理让做一个功能,就是批量下载图片,整体思路简单,但遇到了一个坑,需求是根据勾选的checkbox,点击下载按钮,弹出选择不同规格的图片对话框,并在下载完成后关闭对话框.坑就在下载完成后关闭对话框这个操作,折腾了2个小时,最后是用取巧的方式写了2个定时器模拟网络延时才完成的.因为按正常思路,如果下载完成后就关闭对话框,那对话框会关闭,下载操作是不会完成的,即便方法也执行了.同理先关闭对话框再下载同样不行.百度也没有具体原因,好像牵扯一些异步的原因,因为功能赶的着急,至少功能实现了,前后台基本代码贴下面,留个爪子.
/**
* 获取选择的id,并跳转到批量下载二维码对话框
*/
$('.btn-q').on('click', function() {
var ids=[];
$.each($('input:checkbox:checked'),function(){
ids.push($(this).val());
})
if(ids.length>=1){
showDialog("/quickmarkShow/downLoadImgsPage/"+ids, 800, 350, "下载二维码","WC_Dialog");
}else{
noty({
text: "请至少选择一条信息!",
type:"warning",
timeout: 500, //两秒
modal: true
});
}
});
/**
* 跳转到批量下载二维码图片对话框Controller
*/
@RequestMapping("/downLoadImgsPage/{ids}")
// @Permission("user:edit")
public String downLoadImgsPage(@PathVariable String ids, Model model) {
model.addAttribute("ids", ids);
return PREFIX + "downLoadImgsPage";
}
//批量下载对话框,用定时器控制input框中id为sign的value值,完成下载后关闭对话框功能
//下载对话框对应js
//页面逻辑:页面每1.8秒检查一下id=sign的input框值,在点击下载按钮的时候给该iput赋值为1,这样既能实现下载功能,下能关闭对话框
$(function(){
window.setInterval(function(){
var sign = $("#sign").val();
if(sign == 1){
parent.$('#WC_Dialog').dialog('close');
}
}, 1000);
})
var ids = $("#ids").val();
$("#downLoad").click(function(){
var type = $('input[name=type]:checked').val();
downLoadImgs(type);
});
function downLoadImgs(type){
//模拟表单提交
var url = "/quickmarkShow/downLoadImgs";
var form = $("").attr("action", url).attr("method", "post");
form.append($("").attr("type", "hidden").attr("name", "ids").attr("value", ids));
form.append($("").attr("type", "hidden").attr("name", "type").attr("value", type));
var timer1 = window.setInterval(function(){
console.log(1);
},1000);
window.clearTimeout(timer1);
$("#sign").val(1);
form.appendTo('body').submit().remove();
}
/**
* 批量下载二维码图片后台逻辑
* @param id
* @param model
* @return
*/
@RequestMapping("/downLoadImgs")
public void downLoadImgs(@RequestParam(value="ids") String ids,@RequestParam(value="type") String type,HttpServletRequest request, HttpServletResponse response) {
//1.拿到对应图片地址的url数组
String[] array = ids.split(",");
ArrayList idList = new ArrayList<>(Arrays.asList(array));
List quickmarks= quickmarkService.selectBatchIds(idList);
ArrayList urls = new ArrayList<>();
for (Quickmark quickmark : quickmarks) {
if("big".equals(type)){
urls.add(quickmark.getMaxImg());
}else if("small".equals(type)){
urls.add(quickmark.getSmallImg());
}else if("shiLiang".equals(type)){
urls.add(quickmark.getVectorImg());
}
}
String[] files = new String[urls.size()];
urls.toArray(files);
//2.开始批量下载功能
try {
String nowTimeString = TimeUtils.getNowTimeString();
String downloadFilename = nowTimeString+".zip";//文件的名称
downloadFilename = URLEncoder.encode(downloadFilename, "UTF-8");//转换中文否则可能会产生乱码
response.setContentType("application/octet-stream");// 指明response的返回对象是文件流
response.setHeader("Content-Disposition", "attachment;filename=" + downloadFilename);// 设置在下载框默认显示的文件名
ZipOutputStream zos = new ZipOutputStream(response.getOutputStream());
for (int i = 0; i < files.length; i++) {
URL url = new URL(files[i]);
zos.putNextEntry(new ZipEntry(quickmarks.get(i).getName()+".jpg"));
InputStream fis = url.openConnection().getInputStream();
byte[] buffer = new byte[1024];
int r = 0;
while ((r = fis.read(buffer)) != -1) {
zos.write(buffer, 0, r);
}
fis.close();
}
zos.flush();
zos.close();
} catch (Exception e) {
System.out.println(e);
}
}