用JS发送GET/POST请求下载文件_js发送get请求下载文件-CSDN博客

本文探讨了在前端开发中使用异步请求下载Excel文件遇到的问题，详细介绍了如何利用XMLHttpRequest对象解决异步请求自动解析文件流为JSON的问题，确保浏览器能够正确下载文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在日常的开发过程中，前端向后端发送请求基本上都是通过异步的方式，无论是用JQuery的ajax还是各个前端框架封装的异步方式，但是最近在页面做一个下载excel的功能的时候，发现用异步请求会导致写入响应头的文件流会被异步请求自动解析成JSON，导致浏览器不能下载这个文件。但是如果用window.open(url)的方式发送请求的话，又没有办法把权限信息写入到请求头中，这个时候就只能通过XMLHttpRequest对象来发送请求。

GET请求：

//创建XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();
//打开连接，将请求参数拼在url后面
httpRequest.open('GET', url, true);
//设置期望的返回值类型
httpRequest.responseType = "blob";
//设置请求头，将认证信息放入请求头中
httpRequest.setRequestHeader("Authorization","JWT "+Ext.util.Cookies.get("token"));
//请求成功回调函数
httpRequest.onload = function (oEvent) {
    if (httpRequest.status === 200) {
       var fileName = decodeURI(httpRequest.getResponseHeader("fileName"));
       console.log(fileName);
       var response = httpRequest.response;

       //数据转换为文件下载
       var elink = document.createElement('a');
       elink.download = fileName;
       elink.style.display = 'none';
       var blob = new Blob([response]);
       elink.href = URL.createObjectURL(blob);
       document.body.appendChild(elink);
       elink.click();
       document.body.removeChild(elink);
    }
}
//发送请求
httpRequest.send();

POST请求：

POST请求和GET请求区别不大，只不过POST必须设置请求头的参数类型。

JAVA后台代码：

        response.setContentType("application/octet-stream;charset=utf-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
        response.setHeader("fileName",fileName);
        try {
            OutputStream os = response.getOutputStream();
            sheet.write(os);
            os.flush();
            os.close();
            response.flushBuffer();
        } catch (IOException e) {
            throw new BusException("表格导出失败，IO异常");
        }