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模板上传到项目中后,将其 ...
随机推荐
- C# AutoMaper简单使用
AutoMapper它是一种对象与对象之间的映射器,让AutoMapper有意思的就是在于它提供了一些将类型A映射到类型B这种无聊的实例,只要B遵循AutoMapper已经建立的惯例,那么大多数情况下 ...
- pyRevit开发:如何创建轴网
必看部分: Document获取: 必看文章 如何添加基本项目引用 基础部分: 创建轴网 基本思路: 首先添加引用 获取当前项目文档 创建轴网定位线 创建轴网 设置轴网名称 实现代码: import ...
- CSS滤镜让图片模糊(毛玻璃效果)
CSS代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...
- vue 工作随笔
现在工作要做一个电商项目,将工3作的笔记记在这儿,以后方便结总 本套项目用的前端方案 是: vue vue-router Element -ui Axios Echarts 后端技术采用node.js ...
- 【JDK】分析 String str=““ 与 new String()
一.基础概念 为了讲清楚他们的差异,这里先介绍几个概念. 1.1 常量池 所谓常量池:顾名思义就是用来存放一些常量的.该常量是在编译期被确定,并被保存在已编译的.class文件中,其中包括了类,方法, ...
- PHP的zlib压缩工具扩展包学习
总算到了我们压缩相关扩展的最后一篇文章了,最后我们要学习的也是 Linux 下非常常用的一种压缩格式:.gz 的压缩扩展.作为 PHP 的自带扩展,就像 zip 一样,zlib 扩展是随着 PHP 的 ...
- php超时报错: Maximum execution time of 300 seconds exceeded
php.ini里max_execution_time = 30,原因是这个脚本执行时间太小了,增加一些,或者改成0不限制 可以增加代码: set_time_limit(0);
- windows 中cmd一些特殊命令
chcp 65001 就是换成UTF-8代码页 chcp 936 可以换回默认的GBK chcp 437 是美国英语 shutdown -s -t 60 60秒后关机 shutdown /a ...
- YbtOJ#662-交通运输【线段树合并,树状数组】
正题 题目链接:http://www.ybtoj.com.cn/contest/122/problem/2 题目大意 给出\(n\)个点的一棵有根树,对于每个\(x\)求,删除点\(x\)后修改某个点 ...
- 自学 Python,视频教程和代码一看就懂,动手就废,应该这么学
一.代码量太少了,看得多做得少,导致一做就错. 每一个测试工程师必定是在大量的时间和代码中提升的自己,如果你只是看视频的话,那永远都停留在理论上,很多问题是要实践才能发现的 我打个比方你看视频的时 ...