axios请求流文件下载的另一种方式(FileReader)

使用axios导出并下载文件

最新推荐文章于 2024-06-10 21:49:25 发布

原创最新推荐文章于 2024-06-10 21:49:25 发布 · 657 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

前端请求专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用axios发送POST请求从服务器导出文件，并通过JavaScript实现文件的自动下载。具体步骤包括创建axios实例、配置请求参数如URL、方法及响应类型等，然后解析服务器返回的数据以获取文件名并触发下载。

首先引入axios

import axios from "axios";
const http = axios.create();

http({
  url: "api/export",
  method: "post",
  data: data,
  responseType: "blob"
}).then(res => {
  const blob = res.data;
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = e => {
    const a = document.createElement("a");
    let fileNameArr = res.headers["content-disposition"]
      .split(";")[1]
      .split("=")[1];
    // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
    a.download = fileNameArr;
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
});