vue axios 文件流导出功能 表格 zip 都可以

API接口代码

因为数据返回的是一个流文件,所以必须加上 responseType: ‘blob’

export const getExport = async params => {
  try {
    const data = await axios.post('/xxxxxx/xxxxx',
    { ...params },
    { responseType: 'blob' });
    return data;
  } catch (error) {
    return Promise.reject(error);
  }
};

数据请求

private async getExportData() {
    try {
      this.exportStatus = true;
      this.exportTitle = '正在导出...';
      const resp = await Service.getExport({
        groupSerial: this.formData.parentSerial,
      });
      if (resp.data.type === 'application/vnd.ms-excel') {
        const blob = new Blob([resp.data], {
          type: resp.headers['Content-Type'],
        });
        if (resp && resp.headers['content-disposition']) {
          const filename = resp.headers['content-disposition'].split('=')[1];
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      } else {
        // 错误时需要把blob 转换成json格式,并获取报错信息
        await fileToJson(resp.data)
          .then(res => {
            this.$message.error((res as any).errorMsg);
          })
          .catch(error => {
            /* tslint:disable */
            console.log('error', '\n', error);
            /* tslint:enable */
          });
      }
    } catch (error) {
      /* tslint:disable */
      console.log('error', '\n', error);
      /* tslint:enable */
    } finally {
      this.exportStatus = false;
      this.exportTitle = '确定';
    }
  }

正确的数据返回

正确的数据返回格式

错误时数据返回

错误
不管是正确还是错误请求的状态都是200 ,对于后端来说这只是一个下载功能。错误时通过axios 的响应拦截器根本不行,因为返回的status是200。但是错误时也必须要处理呀。因为我们请求时responseType: ‘blob’ ,Blob ,Blob ,Blob , 直接获取返回的错误信息是不行的。所以需要转换。代码如下,自己封装成了异步。

// 文件流到处错误是,捕获异常
export const  fileToJson = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = res => {
      const { result }: any = res.target; // 得到字符串
      const data = JSON.parse(result); // 解析成json对象
      resolve(data);
    }; // 成功回调
    reader.onerror = err => {
      reject(err);
    }; // 失败回调
    reader.readAsText(new Blob([file]), 'utf-8'); // 按照utf-8编码解析
  });
};
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3是一种用于构建用户界面的JavaScript框架,文件下载功能通常在Web开发中用于实现文件下载的功能。在Vue3中,我们可以通过使用`axios`库来发送HTTP请求,并处理文件下载。以下是实现Vue3文件下载功能的基本步骤: 1. 首先,我们需要安装`axios`库。可以使用以下命令进行安装: ``` npm install axios ``` 2. 在需要使用文件下载功能Vue组件中,我们需要引入`axios`库: ```javascript import axios from 'axios'; ``` 3. 接下来,我们可以创建一个方法来处理文件下载的请求。例如,我们可以创建一个名为`downloadFile`的方法: ```javascript methods: { downloadFile() { axios({ url: 'http://example.com/download', method: 'GET', responseType: 'blob', // 指定响应的数据类型为二进制 }) .then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.ext'); // 指定下载的文件名 document.body.appendChild(link); link.click(); }) .catch((error) => { console.error(error); }); } } ``` 4. 最后,在Vue组件的模板中,我们可以使用一个按钮或其他元素来触发文件下载操作。例如,我们可以在模板中添加一个按钮: ```html <button @click="downloadFile">下载文件</button> ``` 以上就是使用Vue3实现文件下载功能的基本步骤。通过使用`axios`库发送HTTP请求,我们可以获取到文件的二进制数据,并通过创建临时URL来实现文件的下载。在下载时,我们可以为文件指定名称以及自定义其他下载选项,以满足具体需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值