• Ajax配合后端实现Excel的导出


    一、需求

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

    二、实现思路

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

    三、实现步骤

    1、ajax请求的发送我们使用axios库来完成,axiosresponseType需要设置成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-文件下载

    完整代码如下

  • 相关阅读:
    [css]浮动造成的影响
    [py]django的manytomany字段和后台搜索过滤功能
    [py][lc]python高阶函数(匿名/map/reduce/sorted)
    [py][lc]python的纸牌知识点
    [js]js中类的继承
    [js]js杂项陆续补充中...
    [js]js设计模式小结
    WP10的一点小问题
    JS 判断滚动底部并加载更多效果。。。。。。。。。
    This assembly may have been downloaded from the Web. ......
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13309091.html
Copyright © 2020-2023  润新知