前端点击按钮下载文件

最新推荐文章于 2024-03-30 16:10:40 发布

横卧数星斗

最新推荐文章于 2024-03-30 16:10:40 发布

阅读量333

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.youkuaiyun.com/qq_43503450/article/details/129297188

版权

该代码示例展示了如何利用axios库进行POST请求，设置Content-Type和accept头，将响应类型设为blob来处理二进制数据。通过响应获取Content-Disposition头以确定文件名，并创建一个链接元素实现文件下载功能。

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

axios({
        method: "post",
        url: "",
        data: params,
        headers: {
          "Content-Type": "application/json", //重要
          accept: "application/octet-stream", //重要
        },
        responseType: "blob",
      }).then(function (response) {
        var data = response.data;
        var xhr = response.request;
        var headers = xhr.getAllResponseHeaders(); //查看一下响应headers中的属性
        var contentDisposition = xhr.getResponseHeader("Content-Disposition"); //重要
        var url = URL.createObjectURL(data); //重要
        var fileName = decodeURI(
          contentDisposition.split("filename=")[1].split(";filename*=")[0]
        );
        let link = document.createElement("a");
        link.href = url;
        link.download = fileName; //重要--决定下载文件名
        link.click();
        link.remove();
      });