Vue中导出Excel后台返回二进制文件流,responseType设置为‘arraybuffer‘,如果后台返回错误信息应该怎么处理?

1、正常导出的情况:(使用axios发送请求)后端返回二进制文件流

api:

//返回一个Promise(发送post请求)
export function fetchExcel(url, params) {
  axios.defaults.headers.accesstoken = sessionStorage.getItem("access_token")
    ? AES.decrypt(sessionStorage.getItem("access_token"))
    : "";
  url = (process.env.NODE_ENV === "development" ? "/api" : "") + url;
  return new Promise((resolve, reject) => {
    axios
      .post(url, params, {
        responseType: "arraybuffer",
      })
      .then((response) => {
        if (response.data.code === 401 || response.data.code === 402) {
          console.log("404");
        } else {
          resolve(response);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// 调用接口返回二进制文件流,使用bold转为excel:

// 导出
const exportVehicleList = () => {
  data.expoerLoadingFlag = true;
  Api.matchCarListExport(data.vehicleForm).then((res) => {
    if (res.data) {
      data.expoerLoadingFlag = false;
      ElMessage.success({
        message: "导出成功!",
        type: "success",
      });
      let blob = new Blob([res.data], {
        type: "application/vnd.ms-excel",
      }); //type这里表示xlsx类型
      let fileName = "配车信息" + Date.parse(new Date()) + ".xls";
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        let link = document.createElement("a");

        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        document.body?.removeChild(link); //下载完成移除元素
        window.URL.revokeObjectURL(link.href); //释放掉blob对象
      }
    } else {
      data.expoerLoadingFlag = false;
      ElMessage.error(res.data.errorMsg);
    }
  }).finally(()=>{
    data.expoerLoadingFlag = false;
  })
};

2、需求:后台导出量过大抛出提示

由于请求的时候设置了responseType:'arraybuffer'返回的是数据流,要取得json信息需要进行换:

let enc = new TextDecoder('utf-8')
let data = JSON.parse(enc.decode(new Uint8Array(res.data)))

将调用的Api改成:

// 导出
const exportVehicleList = () => {
  data.expoerLoadingFlag = true;
  Api.matchCarListExport(data.vehicleForm).then((res) => {
    try {
      let enc = new TextDecoder('utf-8')
      let data = JSON.parse(enc.decode(new Uint8Array(res.data)));
      ElMessage.error(data.errorMsg);
      data.expoerLoadingFlag = false;
    } catch (error) {
      if(res.data) {
        data.expoerLoadingFlag = false;
        ElMessage.success({
          message: "导出成功!",
          type: "success",
        });
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        }); //type这里表示xlsx类型
        let fileName = "配车信息" + Date.parse(new Date()) + ".xls";
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          let link = document.createElement("a");

          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          document.body?.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(link.href); //释放掉blob对象
        }
      } else {
        data.expoerLoadingFlag = false;
        ElMessage.error(res.data.errorMsg);
      }
    }
  }).finally(()=>{
    data.expoerLoadingFlag = false;
  })
};

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值