前端导出后台文件流

项目需求：实现文件下载的功能，也即是：获取数据流，记录一下

配置要点 responseType: 'blob', //请求入参的需要配置

umi-request 获取文件流 参考地址

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css';
import request from 'umi-request';

export default () => {
  function download() {
    request('/get-data-stream', {
      method: 'POST',
      // 重要
      responseType: 'blob', //请求入参的需要配置 要点
    }).then(res => {
      const blob = new Blob([res]);
      const objectURL = URL.createObjectURL(blob);
      let btn = document.createElement('a');
      btn.download = '文件.docx';
      btn.href = objectURL;
      btn.click();
      URL.revokeObjectURL(objectURL);
      btn = null;
    });
  }
  return (
    <>
      <Button type="primary" onClick={download}>
        下载文件
      </Button>
    </>
  );
};

axios获取文件流 ，个别有的需要放到错误处理中实现,可以做区分处理 参考地址

         let that = this
          axios.get({
           url: 'xxxxxx',
            method: 'get',
            data:{},
            responseType: 'blob', // 后台返回的数据会被强制转为blob类型
          }).then(res => {
            let reader = new FileReader();
             reader.readAsText(res)
             reader.onload = function (result) {
             try {
                // 正常数据处理
               let resData = JSON.parse(result.target.result);  // 解析对象成功，说明是json数据
               if (resData.code) {
                 that.$message({
                  type: 'error',
                   message: resData.desc
                })
             }
            } catch (err) {   
              // 解析成对象失败，说明是该请求是 文件流
               let blob = new Blob([res], {type: "application/vnd.ms-excel"});
               var link = document.createElement('a');
               link.href = window.URL.createObjectURL(blob);
              link.download = `文件名.xls`;
               link.click()
             }
          };
         })

响应头获取文件流 【个人项目】

request.interceptors.response.use(async (response: any) => {
  hide();
  try {
  // 处理正常数据
  } catch (error) {
    //放到错误 处理中。导出数据列表
    const data = await response
    const datas = await data.blob()
    if (data.status === 200 && data.statusText === 'OK') {
      if (datas.size) {
        const blob = new Blob([datas]);
        const objectURL = URL.createObjectURL(blob);
        let btn = document.createElement('a');
        btn.download = '设备列表.csv';
        btn.href = objectURL;
        btn.click();
        URL.revokeObjectURL(objectURL);
        btn = null;
        return new Promise((resolve) => {
          resolve(true)
        })
      }
    }
  }
});

还有的设置responseType:'blob'无效问题 ，参考这个responseType:'blob'无效处理