#头条创作挑战赛#
【前端实战：Vue实现数据导出导入案例】项目开发当中，列表数据的导出功能基本是每个业务系统必备的功能、另外Excel数据批量导入数据库也是比较常见的功能 ， 一般开发都会采用POI、EasyExcel等后端框架实现,后端服务实现的话 ， 如果涉及业务调整的话，生产环境需要重启后端服务 。如果采用前端处理的话，就会方便很多 ， 今天给大家介绍采用Vue框架集成xlsx组件的方式实现简单数据的导入、导出功能 。
1、创建一个空白的vue2/vue3项目
可以通过脚手架方式创建一个vue示例项目 。需要的依赖包如下
"dependencies": {"element-ui": "2.10.1","export2excel": "0.0.1","file-saver": "^2.0.5","vue": "^2.5.2","vue-router": "^3.0.1","xlsx": "^0.17.0"},通过命令安装
npm install export2excel@0.0.1 --save #导出到excel依赖包npm install file-saver@2.0.5 --save #文件保存到客户端 npm install xlsx@0.17.0 --save #操作excel依赖包2、创建Export.vue 示例文件
文件内容完整内容如下：{{ msg }}
导出 导入数据 {{ scope.row.name }} {{ scope.row.age }} 