JavaScript - 自动下载接口返回的文件流

Myth丶恋晨 2022-11-13 06:26 372阅读 0赞

## 前言 ##

当接口返回一段 **文件流** 后，希望前端直接下载该文件。

## 实现 ##

例如，拿下载 `excel` 文件为例。

// 获取时间戳
    let timestamp=new Date().getTime();
    
    // 获取XMLHttpRequest
    let xmlResquest = new XMLHttpRequest();
    
    // 发起请求
    xmlResquest.open("POST", ImgUrlPrefix + "/api/export_man_hour", true);
    
    // 设置请求头类型
    xmlResquest.setRequestHeader("Content-type", "application/json");
    
    // 设置请求token
    xmlResquest.setRequestHeader(
    "Authorization",
    Vue.cookie.get('token')
    );
    xmlResquest.responseType = "blob";
    
    // 返回
    xmlResquest.onload = function(oEvent) { 
    let content = xmlResquest.response;
    
    // 组装a标签
    let elink = document.createElement("a");
    
    // 设置下载文件名
    elink.download = timestamp + ".xlsx";
    elink.style.display = "none";
    let blob = new Blob([content]);
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
    };
    
    // 释放
    xmlResquest.send();

## 其他参考 ##

*  [https://www.zhihu.com/question/26022520][https_www.zhihu.com_question_26022520]
 *  [https://blog.csdn.net/weixin\_42292748/article/details/85060227?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist\_request\_id=&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control][https_blog.csdn.net_weixin_42292748_article_details_85060227_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control]
 *  [https://blog.csdn.net/skye\_Z/article/details/81135540?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control&dist\_request\_id=&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control][https_blog.csdn.net_skye_Z_article_details_81135540_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control]
 *  [https://blog.csdn.net/qq\_39974331/article/details/90700457?utm\_medium=distribute.pc\_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control&dist\_request\_id=1328724.7005.16167270485366267&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control][https_blog.csdn.net_qq_39974331_article_details_90700457_utm_medium_distribute.pc_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control_dist_request_id_1328724.7005.16167270485366267_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control]

[https_www.zhihu.com_question_26022520]: https://www.zhihu.com/question/26022520
[https_blog.csdn.net_weixin_42292748_article_details_85060227_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control]: https://blog.csdn.net/weixin_42292748/article/details/85060227?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control
[https_blog.csdn.net_skye_Z_article_details_81135540_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control]: https://blog.csdn.net/skye_Z/article/details/81135540?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control
[https_blog.csdn.net_qq_39974331_article_details_90700457_utm_medium_distribute.pc_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control_dist_request_id_1328724.7005.16167270485366267_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2defaultBlogCommendFromBaidudefault-14.control]: https://blog.csdn.net/qq_39974331/article/details/90700457?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-14.control&dist_request_id=1328724.7005.16167270485366267&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-14.control