javascript XMLHttpRequest实现下载文件

Bertha 。 2022-02-02 09:45 934阅读 0赞

查阅网上关于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})
        @ResponseBody
        public 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);
            }
    }