前端实战：Vue实现数据导出导入案例

❤️作者主页：IT技术分享社区

❤️作者简介：大家好,我是IT技术分享社区的博主，从事C#、Java开发九年，对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。

❤️荣誉： CSDN博客专家、数据库优质创作者🏆，华为云享专家🏆，阿里云专家博主🏆

❤️个人博客：IT技术分享社区

❤️公众号/小程序：IT技术分享社区

❤️好文章点赞 👍 收藏 ⭐再看，养成习惯

项目开发当中，列表数据的导出功能基本是每个业务系统必备的功能、另外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 [email protected] --save #导出到excel依赖包  npm install [email protected] --save #文件保存到客户端 npm install [email protected] --save #操作excel依赖包

2、创建Export.vue 示例文件

主要实现表格内容的导出和文件内容导入的页面的表格当中，具体文件内容完整内容如下：

<template><divclass="hello"><h1>{{msg}}</h1><el-row><el-buttonsize="small"type="primary" @click="exportTest">导出</el-button><el-uploadaction="/":on-change="importTest":show-file-list="false"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel":auto-upload="false"><el-buttonsize="small"icon="el-icon-upload"type="primary">导入数据</el-button></el-upload></el-row><el-row><el-tableref="multipleTable"style="padding-top: 10px;":data="listData"tooltip-effect="light"highlight-current-row:header-cell-style="{background:'#E6EAF3','font-size':'13px',padding:'0px',height:'40px',}" v-loading="listLoading" :cell-style="{'font-size':'13px',padding:'0px',height:'34px'}"><el-table-columnlabel="序号"type="index"width="50"></el-table-column><el-table-columnlabel="姓名"show-overflow-tooltipwidth="110"><templateslot-scope="scope">{{scope.row.name}}</template></el-table-column><el-table-columnlabel="年龄"show-overflow-tooltipwidth=""><templateslot-scope="scope">{{scope.row.age}}</template></el-table-column></el-table></el-row></div></template><script>import{export_json_to_excel}from"@/vendor/Export2Excel";importXlsxfrom'xlsx'exportdefault{name:'HelloWorld',data(){return{msg:'导入导出测试',listData:[{name:"小明",age:30},{name:"小张",age:25},{name:"小李",age:29}],listLoading:false,xlscTitle:{"姓名":"name","年龄":"age"},}},methods:{exportTest(){constheader=["姓名","年龄"];constbody=["name","age",];constdata=this.formatJson(body,this.listData);console.log(data);export_json_to_excel({header:header,// 表头data:data,// 数据列表filename:"用户表",// 保存文件名});},//格式化json数据为导出数据 过滤掉查询的数据列不在导出的列里面的数据formatJson(filterVal,jsonData){returnjsonData.map((a)=>filterVal.map((b)=>a[b]));},importTest(file){letself=this;consttypes=file.name.split('.')[1];constfileType=['xlsx','xlc','xlm','xls','xlt','xlw','csv'].some(item=>{returnitem===types});if(!fileType){this.$message.error('文件格式错误，请重新选择文件！')}this.file2Xce(file).then(tab=>{// 过滤，转化正确的JSON对象格式if(tab&&tab.length>0){tab[0].sheet.forEach(item=>{letobj={};for(letkeyinitem){obj[self.xlscTitle[key]]=item[key];}self.listData.push(obj);});if(self.listData.length){this.$message.success('上传成功')// 获取数据后，下一步操作}else{this.$message.error('空文件或数据缺失，请重新选择文件！')}}})},// 读取文件file2Xce(file){returnnewPromise(function(resolve,reject){constreader=newFileReader();reader.onload=function(e){constdata=e.target.result;//varXlsx=require("xlsx");this.wb=Xlsx.read(data,{type:"binary"});constresult=[];this.wb.SheetNames.forEach(sheetName=>{result.push({sheetName:sheetName,sheet:Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName])})})resolve(result);}reader.readAsBinaryString(file.raw);})}}}</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped>h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color: #42b983;}</style>