Ajax配合后端实现Excel的导出

一、需求

在我们的日常开发中，可能经常需要遇到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文件下载 https://gitee.com/huan1993/front/tree/master/ajax-download

Ajax配合后端实现Excel的导出的更多相关文章

PHP + Ajax处理大数据查询并导出Excel
思路:使用ajax多次请求服务器,分段生成多个Excel,然后打包压缩成zip,超链接指向下载的文件然后下载. [HTML部分] <input type="button" v ...
Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)
Excel的导入V2优化版有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...
一个基于POI的通用excel导入导出工具类的简单实现及使用方法
前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...
excel数据导出新妙招
之前在做项目的时候需要将数据库中的数据导出为excel表格一遍打印查阅,在网上找了很多插件也没有找到自己理想的好用的插件(也就是说没有找到令我满意的插件),最近在学习a标签的相关知识时理解到,a标签不 ...
如何自动化你的Excel导入导出(Java)？
GitHub | 中文 | English | 博客为什么使用AutoExcel? Excel导入导出在软件开发中非常常见,只要你接触过开发,就一定会遇到.相信很多人会跟我一样选择用Apache P ...
SpringBoot集成文件 - 集成POI之Excel导入导出
Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能.本文主要介绍通过Spr ...
企业级自定义表单引擎解决方案（十六）--Excel导入导出
Excel对于后端管理系统来说,永远都是绕不开的话题,开发Excel导入导出功能往往都比较麻烦,因为涉及到Excel导入模板制作.Excel表格数据与系统数据库表字段映射.Excel导入数据验证.验证 ...
【基于WinForm+Access局域网共享数据库的项目总结】之篇二：WinForm开发扇形图统计和Excel数据导出
篇一:WinForm开发总体概述与技术实现篇二:WinForm开发扇形图统计和Excel数据导出篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
C# 之 EXCEL导入导出
以下方式是本人总结的一些经验,肯定有很多种方法,在此先记下,留待以后补充... 希望朋友们一起来探讨相关想法,请在下方留言. A-1:EXCEL模板导出非常简单,将EXCEL模板上传到项目中后,将其 ...

随机推荐

Selenium自动化实现web自动化-1
框架搭建基于maven+jdk8+junit5+seleium 构建 <dependencies> <dependency> <groupId>org.junit ...
硕盟SM-A44|USB3.0转RJ45千兆网口转换器(TYPE A USB3.0 TO RJ45)
硕盟SM-A44是一款USB3.0转RJ45千兆网口转换器.,转换USB端口到以太网端口.它让你投入低成本就可以轻松拥有千兆以太网.可将网络连接到台式机,笔记本电脑等等设备.硕盟 USB千兆网卡采用嵌 ...
5.10学习总结——Activity的跳转和传值
使用sharedpreference是对信息的存储,也可以进行传值,今天通过查找资料,学习了Activity的跳转和传值方法. 跳转 1.显示跳转 4种方法 1 2 3 4 5 6 7 8 9 10 ...
ThinkPHP5通过composer安装Workerman安装失败问题
报错: topthink/think-worker v3.0.2 requires topthink/framework ^6 https://blog.csdn.net/Douz_lungfish/ ...
Django边学边记--状态保持（cookie和session）
Cookie 概念: Cookie,也叫Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密),好比会员卡或餐票. 特点: Cookie是由服务 ...
cannot connect to chrome at 127.0.0.1:9222
window10系统,先cmd打开chrome, chrome --remote-debugging-port=9222 执行脚本 from selenium import webdriver fro ...
python学习笔记(十三)-python对Excel进行读写修改操作
日常工作中会遇到Excel的读写问题.我们可以使用xlwt 模块将数据写入Excel表格,使用xlrd 模块从Excel读取数据,使用xlutils模块和xlrd模块结合对Excel数据进行修改.下面 ...
python FastAPI 初接触
先吹一波: 原来写接口可以这么简单!!! 简单到没朋友 . 中文官网:https://fastapi.tiangolo.com/zh/tutorial/header-params/ 且天然支持异步处理 ...
python列表底层实现原理
Python 列表的数据结构是怎么样的? 书上说的是:列表实现可以是数组和链表.顺序表是怎么回事?顺序表一般是数组. 列表是一个线性的集合,它允许用户在任何位置插入.删除.访问和替换元素.列表实现是基 ...
Stream聚合函数
Stream班介绍幼稚园开学的第一天,各们家长把小朋友送到了园里,各位小朋友都你看看我,我看看你.有的嚎啕大哭,有的呆若木鸡....这里时候园长安排我拿来小本本记录入园的小朋友.... 记录小朋友 ...