一、需求

在我们的日常开发中，可能经常需要遇到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. 【第五篇】-Maven 构建配置文件之Spring Cloud直播商城 b2b2c电子商务技术总结

    Maven 构建配置文件 构建配置文件是一系列的配置项的值,可以用来设置或者覆盖 Maven 构建默认值. 使用构建配置文件,你可以为不同的环境,比如说生产环境(Production)和开发(Deve ...

  2. 自制计算器 v1.1

    之前的v1.0版本功能还不够完善,这个版本一并做了修改. 代码,每个sub表示哪个按钮做了注释. Dim a, temp, ans As Integer Dim op As String Sub sh ...

  3. PHP中环境变量的操作

    在 PHP 中,我们可以通过 phpinfo() 查看到当前系统中的环境变量信息(Environment).在代码中,我们也可以通过两个函数,查看和修改相应的环境变量信息. getenv() 获取环境 ...

  4. Java基础系列（1）- JDK、JRE、JVM

    Java三大版本(Write Once:Run Anywhere) JavaSE:标准版 JavaME:嵌入式开发 JavaEE:E企业级开发 JDK.JRE.JVM JDK是开发工具包 JRE是编译 ...

  5. div居中和垂直居中的最简单方法

    div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...

  6. django对layui中csrf_token处理方式及其它一些处理

    第一:由于layui官方是没有csrf_token处理机制,所以,在使用layui中post请求,请不要按layui官方提供的两种方法进行设置 官方设置如下: table.render({ elem: ...

  7. First Linux Centos 7.2 rpm 安装MySQL 5.7

    服务器需要换python环境,手贱重装了,今天凑巧需要测试数据库,花了一个小时搞了一下MySQL安装. 1.删除原有Mariadb 说明:目前centos默认的MySQL是Mariadb,由于习惯了M ...

  8. 你说要你想玩爬虫，但你说你不懂Python正则表达式，我信你个鬼，那你还不来看看？

    前言 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. re 模块也提供了与这些方法功能完全一致的函数,这些函数使用一个模式字符串做为它们的第一个参数. re.mat ...

  9. selenium--常用判断

    获取页面 title 的方法可以直接用 driver.title 获取到,然后也可以把获取到的结果用做断言.1.首先导入 expected_conditions 模块:from selenium.we ...

  10. Visual Studio 6.0 在 Windows 10 下崩溃的一种解决方法

    Visual Studio 6.0 下载地址: https://winworldpc.com/product/microsoft-visual-stu/60 安装步骤: https://www.cod ...