react+Ant Design+ahooks-GET请求导出Excel表格

1.接口

注意：接口出添加文件返回（导出）类型：(解决文件导出异常)

"responseType": 'blob'

/**导出商品库存**/
export async function get_downloadStock(params: { fullName: string, brandName: string }, options?: { [key: string]: any }) {
  return request('url', {
    method: 'GET',
    params: {
      ...params
    },
    responseType: 'blob',
    ...(options || [])
  })
}

2.ahooks请求用的是useRequest

const exprot = useRequest(() => {
  const _vaule = form.getFieldsValue();
             //接口地址
  return get_downloadStock({
    fullName: _vaule.fullName || '',
    brandName: _vaule.brandName || '',
  })
}, {
  onSuccess: (res: any) => {
    // 创建一个新的url，此url指向新建的Blob对象
    const url = window.URL.createObjectURL(new Blob([res]))
    // 创建a标签，并隐藏改a标签
    const link = document.createElement('a')
    link.style.display = 'none'
    // a标签的href属性指定下载链接
    link.href = url
    const fileName = '商品库存.xlsx'
    //setAttribute() 方法添加指定的属性，并为其赋指定的值。
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click();
    // 下载完成移除元素
    document.body.removeChild(link);
    // 释放掉blob对象
    window.URL.revokeObjectURL(url);
  },
  manual: true,
})

3.简单介绍# 下载功能实现（new Blob）

downloadTask(params).then(res=> {
 
      const fileName = res.headers['content-disposition'].split('=')[1];
 
      const _res = res.data;
 
      const blob = new Blob([_res]);
 
      const downloadElement = document.createElement('a');
 
      const href = window.URL.createObjectURL(blob); // 创建下载的链接
 
      downloadElement.href = href;
 
      downloadElement.download = decodeURI(fileName); // 下载后文件名
 
      document.body.appendChild(downloadElement);
 
      downloadElement.click(); // 点击下载
 
      document.body.removeChild(downloadElement); // 下载完成移除元素
 
      window.URL.revokeObjectURL(href); // 释放掉blob对象
 
});

注解：

• 调用下载接口
• 创建a标签
• 创建下载链接
• 将a标签添加到body中
• 添加点击事件，进行下载
• 下载完成后移除a标签
• 释放掉blob对象