axios下载指定文件

let url='http://192.18.0.12/a/123.xls'
  axios.get(
      url, { params: data, responseType: 'blob' }
    ).then(res => {
      this.loading = false;
      const content = res.data;
      if (content.size < 500) {
        UI.Error('导出失败');
      } else {
        const blob = new Blob([content]);
        const elink = document.createElement('a')
        elink.download = 'haha.zip';
        elink.style.display = 'none';
        elink.href = window.URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        window.URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      }
    }).catch(err => {
      this.loading = false;
      // err为blob格式数据,需要转回json格式
      err.text().then(respone => {
        let errObj = JSON.parse(respone);
        console.error(errObj.toString());
      })
    })
  • 在 Axios 中,responseType 是一个重要的配置选项,您告诉服务器返回的数据以什么格式返回。

常用的 responseType 选项:

  1. 'arraybuffer':将响应数据解析为 ArrayBuffer 对象。这适用于处理二进制数据或下载文件。
  2. 'blob':将响应数据解析为 Blob 对象。这适用于处理二进制数据或下载文件。
  3. 'document':将响应数据解析为 Document 对象。这适用于处理 XML 或 HTML 文档。
  4. 'json':将响应数据解析为 JSON 对象。这适用于处理 JSON 数据。
  5. 'text':将响应数据解析为字符串。这适用于处理纯文本数据。
axios.get('/api/data', { responseType: 'json' })
  .then(function (response) {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });

如果您不确定用哪种 responseType,请查与您的后端开发人员沟通以了解正确的设置。

  • URL.revokeObjectURL() 是一个用于释放通过 URL.createObjectURL() 创建的对象 URL 的方法。可以避免内存泄漏。

posted on 2022-08-17 09:34  anjun_xf  阅读(238)  评论(0编辑  收藏  举报

导航

TOP