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   anjun_xf  阅读(249)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话

导航

TOP
点击右上角即可分享
微信分享提示