功能介绍

将列表的数据导出成excel文件是管理系统中非常常见的功能。最近正好用到了ElementUI+Vue的组合做了个导出效果,拿出来分享一下,希望可以帮到大家:)

实现效果


实现步骤

1.定义导出按钮

 <el-button @click="exportData" type="success" icon="el-icon-download">
导出数据
</el-button>

2.定义导出方法

这里提供了2种方式导出,请根据需要自选。

// 导出数据
exportData() {
this.$http({
method: "GET",
url: "student/export",
params: {},
responseType: "blob"
})
.then(res => {
/* 方式1,文件名随机
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
let url = window.URL.createObjectURL(blob);
window.location.href = url;
*/
/* 方式2,支持IE10;文件名自定义
*/
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // 将服务端返回的文件流(二进制)excel文件转化为blob
let fileName = "学生列表.xls"; if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
let objectUrl = (window.URL || window.webkitURL).createObjectURL(
blob
);
let downFile = document.createElement("a");
downFile.style.display = "none";
downFile.href = objectUrl;
downFile.download = fileName; // 下载后文件名
document.body.appendChild(downFile);
downFile.click();
document.body.removeChild(downFile); // 下载完成移除元素
// window.location.href = objectUrl
window.URL.revokeObjectURL(objectUrl); // 只要映射存在,Blob就不能进行垃圾回收,因此一旦不再需要引用,就必须小心撤销URL,释放掉blob对象。
}
})
.catch(err => {
console.log(err);
});
},

3.定义导出接口

此处以springboot接口为例

/**
* 导出
* @param response
* @throws Exception
*/
@GetMapping("/export")
public void export(HttpServletResponse response) throws Exception{
// 创建工作簿
HSSFWorkbook workbook = new HSSFWorkbook();
// 创建sheet
HSSFSheet sheet = workbook.createSheet("sheet1");
String fileName = "学生列表.xls"; // 设置要导出的文件的名字
// 获取数据集合
List<Student> list = studentService.list(null);
// 生成标题行
HSSFRow row = sheet.createRow(0);
row.createCell(0).setCellValue("序号");
row.createCell(1).setCellValue("学号");
row.createCell(2).setCellValue("姓名");
row.createCell(3).setCellValue("性别");
row.createCell(4).setCellValue("身份证");
row.createCell(5).setCellValue("联系方式");
row.createCell(6).setCellValue("家庭地址");
row.createCell(7).setCellValue("班级");
row.createCell(8).setCellValue("入学日期");
row.createCell(9).setCellValue("备注"); Student entity=null;
for (int i = 0; i < list.size(); i++) {
entity = list.get(i);
row = sheet.createRow(i+1); // 从第2行开始填充数据
// 序号
row.createCell(0).setCellValue(String.valueOf(i+1));
row.createCell(1, CellType.STRING).setCellValue(entity.getStudentNo());
row.createCell(2,CellType.STRING).setCellValue(entity.getStudentName());
row.createCell(3).setCellValue(entity.getGender().equals("F")?"女":"男");
row.createCell(4).setCellValue(entity.getIdno());
row.createCell(5).setCellValue(entity.getPhone());
row.createCell(6).setCellValue(entity.getAddress());
row.createCell(7,CellType.STRING).setCellValue(getGradeNameById(entity.getGradeId()));
row.createCell(8,CellType.STRING).setCellValue(DateUtil.format(entity.getEnrollDate(),"yyyy-MM-dd"));
row.createCell(9).setCellValue(entity.getRemark());
} response.setContentType("application/octet-stream");
response.setHeader("Content-disposition",
"attachment;filename=" + java.net.URLEncoder.encode(fileName, "UTF-8"));
response.flushBuffer(); workbook.write(response.getOutputStream());
}

ElementUI导出表格数据为Excel文件的更多相关文章

  1. PHP导出MySQL数据到Excel文件

    PHP导出MySQL数据到Excel文件 转载 常会碰到需要从数据库中导出数据到Excel文件,用一些开源的类库,比如PHPExcel,确实比较容易实现,但对大量数据的支持很不好,很容易到达PHP内存 ...

  2. 导出jqgrid表格数据为EXCEL文件,通过tableExport.js插件。

    今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...

  3. 导出网页表格数据为Excel文件的前端解决方案

    在工作中,我们有时会遇到这样的需求,比如:要把页面的表格数据导出为Excel文件.在此记录下自己用的解决方法.代码如下: function tableToExcel(data){ //要导出的数据,t ...

  4. 导出表格数据到excel并下载(HSSFWorkbook版)

    这里主要前面是通过一个全局变量,在layui的done回调里拿到数据,然后将该数据导出到excel,这里要注意一点,下载excel不能用ajax方式,如果采用ajax下载默认会读取response返回 ...

  5. POI3.8解决导出大数据量excel文件时内存溢出的问题

    POI3.8的SXSSF包是XSSF的一个扩展版本,支持流处理,在生成大数据量的电子表格且堆空间有限时使用.SXSSF通过限制内存中可访问的记录行数来实现其低内存利用,当达到限定值时,新一行数据的加入 ...

  6. C#导出GridView数据到Excel文件类

    using System; using System.Web; using System.Web.UI; using System.IO; using System.Web.UI.WebControl ...

  7. PHP导出MySQL数据到Excel

    经常会碰到需要从数据库中导出数据到Excel文件,用一些开源的类库,比如PHPExcel,确实比较容易实现,但对大量数据的支持很不好,很容易到达PHP内存使用上限.这里的方法是利用fputcsv写CS ...

  8. java 写入数据到Excel文件中_Demo

    =======第一版:基本功能实现======= import com.google.common.collect.Maps; import org.apache.log4j.Logger; impo ...

  9. .NET使用Office Open XML导出大量数据到 Excel

    我相信很多人在做项目的都碰到过Excel数据导出的需求,我从最开始使用最原始的HTML拼接(将需要导出的数据拼接成TABLE标签)到后来happy的使用开源的NPOI, EPPlus等开源组件导出EX ...

  10. Python:将爬取的网页数据写入Excel文件中

    Python:将爬取的网页数据写入Excel文件中 通过网络爬虫爬取信息后,我们一般是将内容存入txt文件或者数据库中,也可以写入Excel文件中,这里介绍关于使用Excel文件保存爬取到的网页数据的 ...

随机推荐

  1. 梳理Langchain-Chatchat知识库API接口

    一.Langchain-Chatchat 知识库管理 1.Langchain-Chatchat 对话和知识库管理界面   Langchain-Chatchat v0.28 完整的界面截图,如下所示: ...

  2. Django应用中的静态文件处理

    在日常开发中,我们都是把Django的Debug模式打开,方便调试,在这个模式下,由Django内置的Web服务器提供静态文件服务,不过需要进行一些配置,才能正确访问. 配置settings # St ...

  3. [转帖]能使 Oracle 索引失效的六大限制条件

    Oracle 索引的目标是避免全表扫描,提高查询效率,但有些时候却适得其反. 例如一张表中有上百万条数据,对某个字段加了索引,但是查询时性能并没有什么提高,这可能是 oracle 索引失效造成的.or ...

  4. [转帖]MySQL 8.2.0 GA

    https://cloud.tencent.com/developer/article/2353798 MySQL新的进化版8.2.0于2023年10月25日发行,让我们一起快速浏览一下该版本发生哪些 ...

  5. [转帖]GRUB2 配置文件详解

    https://www.cnblogs.com/fluidog/p/15176726.html 1. GRUB2配置文件 GRUB2 的配置文件通常为 /boot/grub2/grub.cfg,虽然此 ...

  6. [转帖]Grafana+influxdb+ntopng简易网络流量分析展示系统

    Grafana逼格高,所以用它展示ntopng的数据 >_< 一,ntopng 根据官网资料 https://www.ntop.org/ntop/ntopng-influxdb-and-g ...

  7. [转帖]【基础】HTTP、TCP/IP 协议的原理及应用

    https://juejin.cn/post/6844903938232156167 前言 本文将持续记录笔者在学习过程中掌握的一些 HTTP .TCP/IP 的原理,以及这些网络通信技术的一些应用场 ...

  8. 【python】SSTI模版注入

    0x00  Python Vene环境及介绍 venv虚拟环境:创建和管理虚拟环境的模块 首先apt update更新一下包管理 安装你当前版本的python-venv 选择一个目录,安装venv虚拟 ...

  9. 解决VS选择运行“在证书存储区中找不到清单签名证书”

     转:https://www.cnblogs.com/190196539/archive/2011/12/03/2272861.html 解决"在证书存储区中找不到清单签名证书" ...

  10. vim 从嫌弃到依赖(17)——查找模式

    最开始介绍vim的时候,提到vim有普通模式.插入模式.可视模式和命令行模式,并且已经对这几个模式做了详细的介绍了.除了这几个模式以外,vim还有一个非常强大的模式--查找模式,为什么最开始没有将其列 ...