post请求如何导出数据且为excle表格

吃鱼陈默

于 2023-12-29 15:13:02 发布

阅读量1.4k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：问题文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/CY_WINT/article/details/135291628

问题专栏收录该内容

8 篇文章

订阅专栏

本文描述了在项目中处理POST请求时，如何从响应头获取文件名，将Blob转换为URL并实现下载功能。特别提到处理可能的下载问题和使用file-serve库的便捷性。

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

做的项目里大多是get请求，然后接口返回的data直接拼接url然后window.open打开，这次遇到的是post请求，倒也很简单，代码如下：

let exportList = async () => {
    await Api.exportGoodsList(requestObj).then((res) => {
        if (res.status == 200) {
            //在响应头中取到content-disposition并解析为文字再正则匹配，最后作为下载的名字
            let fileName = "";
            let contentDisposition = decodeURI(
                res.headers["content-disposition"]
            );
            let fileRegex = /([^(filename=')]+\.xlsx?)$/g;
            fileName = contentDisposition.match(fileRegex);
            //解析blob为url地址
            let blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            });
            url = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = url;
            // 命名
            a.download = fileName[0];
            a.click();
            window.URL.revokeObjectURL(url);
            // 释放该 url
        }
    });
};

最后值得注意的一点是，如果下载后打不开，或者打开乱码，记得看看有没有在请求中传入带blob的请求方式

然后，还可以使用file-serve库,更加简单。