Ajax配合后端实现Excel的导出

最新推荐文章于 2023-12-31 23:46:49 发布

huan_1993

最新推荐文章于 2023-12-31 23:46:49 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： ajax文件下载 post文件下载 ajax post文件下载

本文链接：https://blog.csdn.net/fu_huo_1993/article/details/106958129

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、需求

在我们的日常开发中，可能经常需要遇到excel的导出，以往excel的导出服务器端都是使用的 GET 方法，但是某些情况下，服务器端只能使用 POST 方法，那么我们有没有好的方法实现excel的导出呢，并且页面最好不要刷新。

二、实现思路

1、方案一：我们可以使用ajax拿到服务器端返回的 数据下载流,然后借助 Blob 对象，在动态的创建一个 a 链接，那么也可以实现。
2、方案二：动态创建一个 iframe 标签下载，这种方案可以POST请求可能就无法下载了。
3、方案三：页面上动态的创建一个form然后提交这个form。
此处我们使用 方案一 即使用 ajax 来实现。

三、实现步骤

1、ajax请求的发送我们使用axios库来完成，axios的responseType需要设置成Blob,默认是json。
2、创建 Blob对象
3、创建a标签
4、触发下载动作

四、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 文件导出</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button type="button" onclick="exportExcel()">导出</button>

<script type="text/javascript">
    function exportExcel() {
        axios({
            method: 'POST',
            url: "http://localhost:8080/export",
            timeout: 5000,
            responseType: 'blob'
        }).then(function (res) {
            var data = res.data;
            var blob = new Blob([data], {type: 'application/octet-stream'});
            var url = URL.createObjectURL(blob);
            var exportLink = document.createElement('a');
            exportLink.setAttribute("download","ajax文件下载.xlsx");
            exportLink.href = url;
            document.body.appendChild(exportLink);
            exportLink.click();
        })
    }
</script>
</body>
</html>

实现效果

ajax-文件下载

完整代码如下

ajax文件下载 https://gitee.com/huan1993/front/tree/master/ajax-download

huan_1993

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax配合后端实现Excel的导出

一、需求在我们的日常开发中，可能经常需要遇到excel的导出，以往excel的导出服务器端都是使用的 GET 方法，但是某些情况下，服务器端只能使用 POST 方法，那么我们有没有好的方法实现excel的导出呢，并且页面最好不要刷新。二、实现思路1、方案一：我们可以使用ajax拿到服务器端返回的数据下载流,然后借助 Blob 对象，在动态的创建一个 a 链接，那么也可以实现。2、方案二：动态创建一个 iframe 标签下载，这种方案可以POST请求可能就无法下载了。3、方案三：页面上动态的创建一个
复制链接

扫一扫