Ajax配合后端实现Excel的导出
目录
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>实现效果
