window location herf=""的方式换成用get请求下载文件

最新推荐文章于 2024-12-11 10:08:33 发布

原创最新推荐文章于 2024-12-11 10:08:33 发布 · 6.2k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

window.location.href换成用get请求下载文件

我们一般是用window.location.href 的方式下载文件对象，但是这样前端界面就不知道什么时候后台才把数据封装好，如果数据量过大的时候，界面就会出现按钮点击了，但是界面不动的假死现象，这样我们就需要使用获取文件流的方式让js获取数据去下载，在这期间，js就能很好的进行相应的处理反馈；

//一般的方式
window.location.href = "api/v1/download";

//修改后的方式
axios({
 method: 'get',//请求方式
  headers: {
    'Content-Type': 'application/vnd.ms-excel',
  },
  url: "api/v1/download/name",//请求路径
  responseType: 'blob'
}).then(res => {
    const blob = new Blob([res.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');//我们用模拟q标签点击事件
    const fname = 'demo列表'; //下载文件的名字
    link.href = objectUrl;
    link.setAttribute('download', fname);
    document.body.appendChild(link);
    /**
    * 在这期间，我们可以做自己界面的反应逻辑
    **/
    link.click();//点击
    document.body.removeChild(link); // 下载完成移除元素
    window.URL.revokeObjectURL(URL); // 释放掉blob对象
  })