javascript XMLHttpRequest实现下载文件

查阅网上关于JavaScript实现下载文件功能，主要有几种方式：

1. window.open(url) 这是最差劲最不负责任的做法，因为会下载会弹出白页面

2. 构造form表单，form.submit() 这种方式有一个问题：不能加入等待对话框

3. 使用XMLHttpRequest，获取response 实现下载，但是有一个小问题：后台header中filename不能直接使用

以下针对第三种进行改进：

1. 前端代码

download: function(url, params, fileName) {var len, i = 0,temp, input, form, key;//处理参数var urlParams = [];if (isA(params)) {for (len = params.length; i < len; i++) {temp = params[i];urlParams.push(temp.key + "=" + temp.value);}} else if (isO(params)) {for (key in params) {temp = params[key];urlParams.push(key + "=" + temp);}} else if(isS(params)) {params = Utilities.parseQuery(params);for (key in params) {temp = params[key];urlParams.push(key + "=" + temp);}}//显示等待Dialogs.showWait('正在下载中，请稍候...');var xmlRequest = new XMLHttpRequest();xmlRequest.open("POST", url, true);xmlRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlRequest.responseType = "blob";xmlRequest.onload = function (oEvent) {if((xmlRequest.status >= 200 && xmlRequest.status < 300) || xmlRequest.status === 304) {if(!fileName) {//从header中获取fileName = decodeURI(xmlRequest.getResponseHeader('filename'));}console.log(fileName);//校验是否下载参数var content = xmlRequest.response;if(!fileName || fileName === 'null') {var myReader = new FileReader();myReader.addEventListener("loadend", function(e){var msg = e.srcElement.result;Dialogs.showWarn(msg);});myReader.readAsText(content);return;}//数据转换为文件下载var elink = document.createElement('a');elink.download = fileName || 'demo.xlsx';elink.style.display = 'none';var blob = new Blob([content]);elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);//关闭等待Dialogs.hide();} else {Dialogs.showWarn('下载失败');}};try {//发送参数字符串， 但是formData需要后台支持xmlRequest.send(urlParams.join('&'));} catch (e) {Dialogs.showWarn('发送下载请求失败');console.error('发送失败',e);}},

后台代码：

需要设置response.addHeader("filename", StringUtils.urlEncode(fileName + ".xlsx"));

@RequestMapping(value = "/download.json", method = {RequestMethod.GET, RequestMethod.POST})@ResponseBodypublic String downloadList(RequestParamRequest requestParamRequest,HttpServletRequest request,HttpServletResponse response) {其他逻辑省略....response.setContentType("application/octet-stream");response.addHeader("Content-disposition", "attachment; filename=" + new String((fileName + ".xlxs").getBytes("utf-8"), "ISO8859-1"));//在header中设置中文文件名，需要编码，前端需要获取response.addHeader("filename", StringUtils.urlEncode(fileName + ".xlsx"));OutputStream out = null;try {out = response.getOutputStream();workbook.write(out);} finally {IOUtils.closeQuietly(out);}
}

javascript XMLHttpRequest实现下载文件相关推荐

javascript 检测 header下载文件--插件
原理:下载文件时设置一个cookie,客户端利用js间隔性检测cookie,如果检测到则服务端对下载的文件处理完毕,然后通知客户端 http://johnculviner.com/post/2012/ ...
PC端下载文件到本地
最新更新时间:2021年08月12日14:42:40 <猛戳-查看我的博客地图-总有你意想不到的惊喜> 本文内容:前端开发过程中,经常会遇到下载文件到本地的需求,用户点击一个按钮,浏览器会 ...
ajax实现下载文件进度条及方法详解
javascript使用ajax下载文件进度条实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...
使用Javascript / jQuery下载文件
本文翻译自:Download File Using Javascript/jQuery I have a very similar requirement specified here . 我在这里指 ...
javascript下载文件几种方式，接收后台返回流下载或直接下载文件
目录 1 javascript下载文件7中方式 1.1 window.location.href下载 1.2 window.location下载 1.3 iframe下载 1.4 form表单的形式下 ...
JavaScript实战篇 -ajax方式实现js打包下载文件
一.问题描述在我们日常开发中,会遇到批量下载方面的问题;如上图所示,我们要批量下载图片,接下来我们就模拟实现这个功能,并将下载文件打包下载; 二.准备工作 2.1 JSZip JSZip 是一个 j ...
python单击url下载网页文件_使用不带url的python脚本从网页下载文件，调用onClick函数 - javascript...
有一个网页带有链接"单击下载",单击该链接可以下载文件. 我可以通过转到网页并单击此链接来手动下载此文件,但是我需要通过python脚本下载此文件. 如果我看到源代码,则可以看到锚 ...
如何用 JavaScript 下载文件
简介我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面 ...
[Javascript]XMLHttpRequest对象实现下载进度条
摘要可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...

javascript XMLHttpRequest实现下载文件

javascript XMLHttpRequest实现下载文件相关推荐

最新文章

热门文章