用JS发送GET/POST请求下载文件

2024年6月10日 766次阅读 来源: GechangLiu

在日常的开发过程中，前端向后端发送请求基本上都是通过异步的方式，无论是用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异常");
        }

 

    原文作者：GechangLiu
    原文地址: https://blog.csdn.net/GechangLiu/article/details/103118645
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞