前端js文件流导出文件下载在本地

博主在写一个前端导出功能，点击按钮，将文件下载到本地。后端返回的是文件流的格式，下面就是实现的方法，亲测可用哦~

1.js导出方法

handleExport = () => {
    const req = new XMLHttpRequest();
    req.open('POST', url, true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = () => {
      const data = req.response;
      const a = document.createElement('a');
      const blob = new Blob([data],{type:"application/octet-stream"});
      const blobUrl = window.URL.createObjectURL(blob);
      this.download(blobUrl) ;
    };
    req.send('');
  };
 
 download = (blobUrl) => {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.download = 'xxx.xls'; //文件名
  a.href = blobUrl;
  a.click();
  // document.body.removeChild(a);
}

2.HTML

<Button type="primary" onClick={() => this.handleExport()}>
                导出
            </Button>

2021.7.23补充：

下载方法二：

const getBaseUrl =  () => {
    if (domain === 'development' || domain === 'test') {
        return '测试环境url';
    } else if (domain === 'prepub') {
        return '预发环境url';
    } else if (domain === 'production') {
        return '线上环境url';
    }
    return '测试环境url';
};

  // 模板下载
  const downloadTem = async () => {
   //域名
    const url = getBaseUrl();
    let a = document.createElement('a');
    a.download = "模板.xlsx";
    // 下载模板
    a.href = url + '下载接口';
    a.click();
}