一、需求
在我们的日常开发中,可能经常需要遇到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/fr...