最近在做一个项目二次开发,有40万的用户数据需要导出到excel里,研究了几天,参考一些代码终于找到了实现的方法。如果数据有**10万条数据**,如何导出excel表格呢,这么大的数据如果一次导出对于服务器或者网络都是一个及大的考验,不太可能一性导出,要么资源被用完,要么网络超时,因为导出的数据excel文件可能有大几M或上百M,对于后端来说大量数据查询读取,特别是10万数据里如果涉及到其他表二次查询,基本上是卡死超时。


先说说后端PHP实现导出excel方式:无非用PhpOffice\PhpSpreadsheet组件来导出,但是对于大数据来说一次导出也是吃力。资源瓶颈基本是在于数据库查询或IO读取上。或者一次读取到内存里导致内存溢出异常,后端解决方案,无非是分批导出成多个excel,再多个excel打包成zip下载。


excel最大支持行数

在导出前先了解下一下`.xlsx`最多支持多少行及多少列数据。查了一下资料,

  • 在 Excel2003(.xls)文件:最大256(IV,2的8次方)列,最大65536(2的16次方)行;即横向256个单元格,竖向65536个单元格,不包括表头。

  • Excel2007(.xlsx)文件:最大16384(XFD,2的14次方)列,最大1048576(2的20次方)行(**即104万行**);即横向16384个单元格,竖向1048576个单元格。


纯前端vue导出10万+数据excel实现思路方法:

分批请求数据回浏览器

带分页码循环去后端接口请求分页数据。

分页数据在浏览器合并到变量里

用excel导出组件数据导出excel。


vue需要用的的组件。

  • file-saver

  • xlsx

  • script-loader


组件安装

  • npm install -S file-saver(生产依赖,则为-s)

  • npm install -S xlsx

  • npm install -D script-loader (开发依赖,则为-d)



vue10万大数据分批导出效果:

导出excel.gif