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

lit_finger

于 2021-11-03 14:58:33 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

分类专栏：前端请求文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/lit_finger/article/details/121119598

前端请求专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入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);
  };
});