通过axios调接口实现导出文件的方法，并且可以随意命名

最新推荐文章于 2024-07-01 14:42:59 发布

原创最新推荐文章于 2024-07-01 14:42:59 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

前端菜鸟打怪手册专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种在前端实现文件导出的方法，包括使用newBlob处理后端文件流，通过axios配置请求头，并封装了一个通用的文件下载函数，解决了直接使用window.open()的局限性。

需求：如题，按一个按钮导出文件。
遇到的坑：1：window.open（）打开链接请求接口下载下来，但是需要把请求头写在header上，我百度好久也没看到相关的技术。

解决方法：用new Blob接收后端的文件流，再开个隐藏的链接自动下载

一：封装一个统一处理导出文件的处理方法，download属性可以随便改文件名


//封的方法
export function download(data, name = "excel表.xlsx") {
    if (!data) {
        return;
    }
    let url = window.URL.createObjectURL(new Blob([data]));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', name);
    document.body.appendChild(link);
    link.click();
}

二：照常调接口，通过axios配请求头

注意：要声明一下数据类型，responseType: 'blob’

// 照常调接口
export const memberTypeExcel= (params) => {
    return request({
        url: '/memberTypeExcel/excel',
        method: 'get',
        params,
        responseType: 'blob',

    })
}

三：页面可以直接用了，完美解决

import { download } from "@/util/export";

handleExcel() {
      memberTypeExcel(this.excel).then(res => {
        download(res.data, "考勤报表");
      });
    },

思考：文件名后台已经写好了，能不能我不取名，文件自己用后台的名字？
尝试：给new Blob指定类型，再把download属性置空（不提前指定就会默认是txt），但是文件名是随机数，失败
fe3e2df2-3b33-43b2-8452-3a62aaac43ae.xls


export function download(data) {
    if (!data) {
        return;
    }
    let url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.ms-excel" }));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', '');
    document.body.appendChild(link);
    link.click();
}

还是直接拿后台的数据给他赋个名字吧
后台返的数据

在这里插入图片描述

handleExcel() {
      memberTypeExcel(this.excel).then(res => {
        // encodeURI('XXX')--把非英文字符转化为英文编码
        // decodeURI('XXX')--把转化后的英文编码转化回来
        let excelName = decodeURI(
          res.headers["content-disposition"].split("=")[1]
        );
        download(res.data, excelName);
      });
    },