前言:
以前excel都是使用后端java或者php等语言实现数据的导入和导出,现在可以通过vue的前端项目实现表格的导入和导出,减少后端的压力。同时也可以让前端更好的助力后端。
是原始(很棒)SheetJS / xlsx项目的分支。它被扩展以使单元格格式可以从.xlsx工作簿中读取和写入。
支持读取的格式:
Excel 2007+ XML格式(XLSX / XLSM)Excel 2007+二进制格式(XLSB)
Excel 2003-2004 XML格式(XML" SpreadsheetML")
Excel 97-2004(XLS BIFF8)
Excel 5.0 / 95(XLS BIFF5)
OpenDocument电子表格(ODS)
支持写入格式:
XLSX
CSV(和常规DSV)
JSON和JS对象(各种样式)
通过js-xlsx实现简单的数据的导入和导出。
安装
Npm安装,在项目根目录执行
npm install xlsx –save
实现安装
例子
1、 导出
![acafb5a25ab23781138a656ddc189cfd.gif](https://i-blog.csdnimg.cn/blog_migrate/1eb116c5fe0696ead83830a3dc11701c.gif)
2、 导入
![0cf6fa3debc0784f9572fadd813fad22.gif](https://i-blog.csdnimg.cn/blog_migrate/207ae96973548c3bf27504dadf2ba13f.gif)
测试结果:
1、测试导出10条用户数据大小17kb、未卡顿。
2、测试导出50条用户数据大小28kb、未卡顿。
3、测试导出1000条用户数据大小278kb、未卡顿。
源码获取:
由于源码内容太多您可以访问euiadmin.com体验并下载源码进行查看。
导入组件位于:components/module/excel/ImportExcel.vue
导出组件位于:components/module/excel/OutEXcel.vue
组件已经提供注释,如有不解你也可以在今日头条给我留言。
结语
EuiAdmin致力于减少前端开发者的开发时间,特别是减少在JavaScript库的使用时间,你可以通过使用EuiAdmin获取强劲的tinymce富文本编辑器、vue-cookies的集成使用、美丽的Echarts图表、js-xlsx实现excel图表导入导出等丰富功能。
喜欢可以"点赞、关注、评论"三联一波