Ajax异步请求下载文件
背景:
- 页面点击“下载”按钮 下载图片
- window.location.href= ‘url’ 存在一次点击下载两个相同图片的问题(本次就死在这~~~~)
- 后端将图片已处理为流
废话不多说,看代码
前端JS
window.downloadImage=function(date){
layer.load();
var url ='后端下载的Url'
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var a = document.createElement('a');
a.download = loginUserName+'.jpg';
a.href = e.target.result;
$("body").append(a);
a.click();
$(a).remove();
layer.closeAll('loading');
}
}
layer.closeAll();
};
xhr.send()
}
后端代码质量不咋地, 功能是好的, 将就着看哈~
@ResponseBody
@RequestMapping("/download")
public void download(String url,HttpServletResponse response,HttpSession session){
InputStream inputStream=null;
OutputStream outputStream=null;
String attribute = String.valueOf(session.getAttribute(SessionConst.USER));
if(StringUtils.isNotEmpty(url)){
try {
URL url1 = new URL(url);
URLConnection con = url1.openConnection();
con.setConnectTimeout(5*1000);
inputStream = con.getInputStream();
response.setCharacterEncoding("UTF-8");
response.setContentType("application/octet-stream;charset=UTF-8");
response.setHeader("Content-disposition", "attachment;fileName=" +
URLEncoder.encode(""+attribute+".jpg", "UTF-8"));
outputStream = response.getOutputStream();
IOUtils.copy(inputStream, outputStream);
outputStream.flush();
} catch (MalformedURLException e) {
LOG.error("MalformedURLException error",e);
} catch (IOException e) {
LOG.error("IOException" ,e);
}finally {
if(null!=outputStream){
try {
outputStream.close();
} catch (IOException e) {
LOG.error("outputStream.close() error",e);
}
}
if(null!=inputStream){
try {
inputStream.close();
} catch (IOException e) {
LOG.error("is.close() error",e);
}
}
}
}
}