axios导出文件流的方法

1.axios ,在页面直接调用 

  const response = await axios({
               method: 'post',
           url: url, // 替换为你的后端接口
           responseType: 'blob', // 设置响应类型为 blob
           data: obj,//接口传值
           headers: {
             ['Authorization']: getToken()//传token
           }
         });
         console.log('response', response);
         const url = window.URL.createObjectURL(new Blob([response.data]));
         const link = document.createElement('a');
         link.href = url;
         link.setAttribute('download', 'filename.xlsx'); // 替换为你想要的文件名和扩展名
         document.body.appendChild(link);
         link.click();
         link.remove(); // 下载完成后移除链接元素

2.写个方法index.js,页面调用这个方法

2.1index.js

import request from '@/utils/request';

/**
 * 导出
 */
export async function exportOrder(params) {
  const res = request({
    url: url,
    method: 'POST',
    data: { ...params },
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  });
  return res;
}

2.2页面调用,这是成功的时候,导出的是文件流

 exportOrder({ ...obj })
        .then((response) => {
          loading.value = false;
          EleMessage.success({
            message: `导出成功`,
            plain: true
          });
          download(response.data, `${form.name}.xlsx`);
          handleCancel();
        })
        .catch((e) => {
          EleMessage.error({ message: '导出失败', plain: true });
        });
    });

3.当调用失败的时候,需要解析后台返回的JSON数据

exportOrder({ ...obj })
        .then((response) => {
          loading.value = false;
          const { status, data: blob } = response;
          if (status >= 400) {
            EleMessage.error({ message: '导出失败', plain: true });
            return;
          }
          const contentType = response.headers['content-type'];
          if (
            contentType &&
            (contentType.includes('application/json') ||
              contentType.includes('text/plain'))
          ) {
            return handleBlobAsError(blob);
          }
          EleMessage.success({
            message: `导出成功`,
            plain: true
          });
          download(response.data, `${form.name}.xlsx`);
          handleCancel();
          emit('done');
        })
        .catch((e) => {
          EleMessage.error({ message: '导出失败', plain: true });
        });

失败调用的方法handleBlobAsError 

/* 导出失败的数据 */
  const handleBlobAsError = async (blob) => {
    const text = await blob.text(); // 将 Blob 转为文本
    try {
      const json = JSON.parse(text);
      // 如果成功解析为 JSON,说明是后端返回的错误信息
      EleMessage.error(
        json.message || '导出失败:' + (json.error || '未知错误')
      );
      return false;
    } catch (e) {
      // 解析失败,可能是真正的文件(如损坏的 Excel),仍尝试下载
      EleMessage.warning('服务器返回异常数据,尝试下载文件...');
      download(blob, { headers: {} });
      return false;
    }
  };

这样就可以把导出失败的JSON数据,提示,以便找到错误。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值