vue3后端返回文件流前端导出xlsx

vue3后端返回文件流前端导出xlsx

因为使用vue3，所以我采用axios，可以在promise的then里取到流

const sdownload=async()=>{
const re=await download().then(re=>{  //在.then里可以获取到data

//ant的成功消息提示
    notification.success({
          message: '提示',
          description: '操作成功',
        });
    let fileName = '模板'; // 文件名
          //对文件名乱码转义--【Node.js】使用iconv-lite解决中文乱码
          let iconv = require('iconv-lite');
          iconv.skipDecodeWarning = true; //忽略警告
          fileName = iconv.decode(fileName, 'UTF-8');
          //   link.href = response.data;
          //   link.download = fileName;
          //   document.body.appendChild(link); // 兼容FireFox
          //   link.click();
          //   window.URL.revokeObjectURL(excelUrl);
          //   link.remove(); // 兼容FireFox
//这个re就是.then获取的文件流 这里需要改
          let blob = new Blob([re], {
            type: "application/vnd.ms-excel"
          });
          console.log('blobblobblob',blob);
          let elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.target = "_blank";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL对象
          document.body.removeChild(elink);




}).catch(re=>{
  console.log(2);
  notification.error({
          message: '提示',
          description: '操作失败'+re,
        });
})



}

写完点击方法之后还需要在网络请求里配置一下

const requestHandler = config => {
  if ( config.url === '/file/common/download') {  //在这里判断一下 如果是请求文件流的接口，就需要在responseType改为blob类型 
    config.responseType = 'blob'  // 服务请求类型
    console.log(config);
    console.log(22);
  }
  const savedToken = localStorage.get(STORAGE_TOKEN_KEY); // 如果 token 存在
  // 让每个请求携带自定义 token, 请根据实际情况修改
  if (config.method === 'get') {  //前端get传递数组
    config.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
    }
   }
  if (savedToken) {
    config.headers[REQUEST_TOKEN_KEY] = `Bearer ${savedToken}`;
  }

  return config;
}; // Add a request interceptor

完成以上俩个步骤就可以实现导出了 因为我的后端在返回错误字段在他那，还需要判断一下，这个可以忽略

const responseHandler = response => {
  console.log(data,'data');
  const { data = {} } = response; // 403 无权限
  // if(!data.code)return
  if (!data.code) {  //如果是文件流是没有code的 要不然会进下面的提示报错
    return data
  } else if(data.code !== 200){
    notification.error({
      message: '提示',
      description: data.msg,
    });
  }