一、需求

在我们的日常开发中，可能经常需要遇到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的导出的更多相关文章

  1. PHP + Ajax处理大数据查询并导出Excel

    思路:使用ajax多次请求服务器,分段生成多个Excel,然后打包压缩成zip,超链接指向下载的文件然后下载. [HTML部分] <input type="button" v ...

  2. Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)

    Excel的导入V2优化版 有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...

  3. 一个基于POI的通用excel导入导出工具类的简单实现及使用方法

    前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...

  4. excel数据导出新妙招

    之前在做项目的时候需要将数据库中的数据导出为excel表格一遍打印查阅,在网上找了很多插件也没有找到自己理想的好用的插件(也就是说没有找到令我满意的插件),最近在学习a标签的相关知识时理解到,a标签不 ...

  5. 如何自动化你的Excel导入导出(Java)？

    GitHub | 中文 | English | 博客 为什么使用AutoExcel? Excel导入导出在软件开发中非常常见,只要你接触过开发,就一定会遇到.相信很多人会跟我一样选择用Apache P ...

  6. SpringBoot集成文件 - 集成POI之Excel导入导出

    Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能.本文主要介绍通过Spr ...

  7. 企业级自定义表单引擎解决方案（十六）--Excel导入导出

    Excel对于后端管理系统来说,永远都是绕不开的话题,开发Excel导入导出功能往往都比较麻烦,因为涉及到Excel导入模板制作.Excel表格数据与系统数据库表字段映射.Excel导入数据验证.验证 ...

  8. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二：WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  9. C# 之 EXCEL导入导出

    以下方式是本人总结的一些经验,肯定有很多种方法,在此先记下,留待以后补充... 希望朋友们一起来探讨相关想法,请在下方留言. A-1:EXCEL模板导出 非常简单,将EXCEL模板上传到项目中后,将其 ...

随机推荐

  1. GO安装golang.org/x/net扩展库

    在学习golang过程中,有部分示例代码使用到了非标准库golang.org/x/net/html相关的库函数,但是标准代码库中没有该库,因此需要自己安装: 我这里使用git下载源码进行的安装. 为了 ...

  2. AI学习1

    什么是AI: 功能介绍:是一种应用于出版.多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的矢量图形处理工具应用:标志设计.字体设计.印刷出版.海报书籍排版.专业插画.多媒体图像处理和互联网页面 ...

  3. outerHTML和outerText的赋值是异步的

    用JavaScript操作DOM时,经常有生成复杂HTML结构的需求.此时,通常不是用标准DOM接口(如createElement().setAttribute().append()等)来语句式地生成 ...

  4. SpringAOP-动态代理，日志注入

    SpringAOP 前言: 1.AOP定义? 用来干啥的? 怎么用?(怎么跑通它的思路) 代理模式 为啥要学代理模式? -- 因为是SpringAop的底层 原有的代码不敢动,一动就是Bug,.所以使 ...

  5. java设计模式，工厂，代理模式等

    javaEE设计模式: 工厂模式:主要分为三种模式: 定义:在基类中定义创建对象的一个接口,让子类决定实例化哪个类.工厂方法让一个类的实例化延迟到子类中进行. 为什么要使用工厂模式: (1) 解耦 : ...

  6. PHP的命令行扩展Readline相关函数学习

    PHP 作为一个 Web 开发语言,相对来说,命令行程序并不是它的主战场.所以很多年轻的 PHP 开发者可能连命令行脚本都没有写过,更别提交互式的命令操作了.而今天,我们带来的这个扩展就是针对 PHP ...

  7. 一些PHP选项参数相关的函数

    关于 PHP 的配置,我们大多数情况下都是去查看 php.ini 文件或者通过命令行来查询某些信息,其实,PHP 的一些内置函数也可以帮助我们去查看或操作这些配置参数.比如之前我们学习过的 关于php ...

  8. http升级https遇到的问题

    1. 功能请求失效: 可能是链接为http请求,导致出现问题 2.浏览器网址左边出现黄色感叹号: 这是由于网页中存在http的图片链接,需要根据实际情况修改; 3.将网页内的http请求变为https ...

  9. js相同的正则多次调用test()返回的值却不同的问题

    js代码: var name = '测试中文';// 姓名 var nameRgexp = new RegExp("[a-zA-Z\u4e00-\u9fa5]{2,}"," ...

  10. Docker系列（4）- run的流程和docker原理

    回顾HelloWorld流程 底层工作原理 Docker是怎么工作的? Docker是一个Client-Server结构的系统,Docker的守护进程运行在宿主机上.通过Socket从客户端访问 Do ...