react 导出文件时获取响应头中的文件名

在开发中导出功能十分常见，而导出的文件虽然前端也可以灵活设置名字，但有时候也可能需要使用后台下发文件名，下面就是通过截取响应头中的信息设置文件名

 通过上图可知，后端下发的文件标题放在红框参数中，而绿框是需要截取出的完整数据

 // 导出
  const handleExport = async () => {
    request(`/api/sino-app/org/Export`, {
      method: 'GET',
      responseType: 'blob',
      //headers 可选，根据接口实际情况
      headers: {
        'Sino-Auth': `${getToken()}`,
      },
      params: {
        month: time,
      },
      //如果需要原始响应，请设置为 true 并返回 { data, response }。因为后面需要获取响应头这里设置为true
      getResponse: true,
    })
      .then((response) => {
        const blobUrl = window.URL.createObjectURL(response.data);
        const aElement = document.createElement('a');
        const root = document.getElementById('root');
        // 以下为重点部分，截取`attachment;filename*=utf-8''`后面的数据
        const filename =
          response.response?.headers
            ?.get('content-disposition')
            ?.split(`attachment;filename*=utf-8''`)[1] || 'XX统计表';
        aElement.href = blobUrl; // 设置a标签路径
        aElement.download = decodeURI(filename);
        root?.append(aElement);
        aElement.click();
        window.URL.revokeObjectURL(blobUrl);
        aElement.remove();
      })
      .catch((error) => {
        console.log('文件下载失败', error);
        message.error(`文件下载失败.`);
      });
  };

因本项目使用Ant Design Pro框架，在发送请求时使用umi-request封装的request方法，所以获取响应头需要配置getResponse: true；其他请求方式按具体情况操作，重点在于获取到响应头并对其进行截取