Vue封装Excel导入组件并使用ElementUI显示内容，将json结果集传递给后端 |
您所在的位置：网站首页 › elementui组件封装 › Vue封装Excel导入组件并使用ElementUI显示内容，将json结果集传递给后端 |
Vue封装Excel导入组件并使用ElementUI显示内容，将json结果集传递给后端
|
本文共 4051 字，大约阅读时间需要 13 分钟。 Vue封装Excel公用导入组件，将内容显示在ElementUI表格中，将结果传递给后端进行数据库 操作 前言使用Vue读取Excel内的数据需要使用npm安装xlsx，将结果提取出来然后动态渲染到ElementUI的Table中进行结果展示，再一步点击确定来把数据传递给SpringBoot后端加入到数据库中 一、演示 1.选择文件点击导入按钮后，选择要导入的excel文件
这里为了演示就把读取到的Excel数据直接展示出来了，后面会介绍如何转换某些特定字段，例如：男女改为0,1
一个按钮，一个组件，UploadEx 为自定义上传弹框组件，选择文件界面和内容列表界面都在此组件内，想要完成其他Excel文件读取，只需要修改以下两个组件属性和一个方法 excelTitle：要映射的列名 urlStr：后端url 导入 :isshow.sync="importshow" :exceltitle="exceltitle" urlstr="> type="primary" @click="importshow = true">data中的内容 data(){ return{ importShow: false,excelTitle: [], }},在页面created函数中设置excelTitle内容 // 设置导出模板的列setTitle(){ this.excelTitle = [] let et1 = { 'label':'姓名', 'prop':'userName'} let et2 = { 'label':'性别', 'prop':'userSex'} let et3 = { 'label':'爱好', 'prop':'userHobby'} this.excelTitle.push(et1) this.excelTitle.push(et2) this.excelTitle.push(et3)}, 2.组件注册文件注册大家可以使用import或下面这个方法来全局注册 可以在此组件所在位置声明一个index.js文件 // 公用组件import uploadEx from './uploadEx.vue' // 文件上传框const components = { install: function (Vue) { // 公用组件Vue.component('UploadEx', uploadEx) }}export default components然后main.js中修改，记得找对index.js文件 import components from './xxx/index'Vue.use(components) 3.组件内容uploadEx组件HTML内容如下，一个上传框用于选择文件，一个Table列表用于显示Excel内容 drag action="" :on-change="handleChange" :show-file-list="false" :on-remove="handleRemove" :file-list="fileListUpload" :limit="1" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :auto-upload="false"> 点击上传 class="el-upload__text"> class="el-icon-upload"> style="margin: 10px auto;"> title="导入" :visible="isshow" :show-close='false' width="40%" @before-close="importclose"> 只能上传xlsx和xls格式的且大小必须小于2M 取消title="Excel内容" :visible.sync="excelShow" width="60%" center> :data="excelData" ref="excelDataRef" border style="width: 100%;height:300px;overflow-y:scroll;"> :prop="col.prop" :label="col.label" :key="index"> v-for='(col,index) in exceltitle'> @click="importclose()"> slot="footer" class="dialog-footer"> class="el-upload__tip" slot="tip"> 重新选择 确定导入 type="primary" @click="importexcel()"> @click="excelshow = false;filetemp = null;filelistupload = []"> slot="footer" class="dialog-footer">样式就是随便加个吧 lang="scss">接下来是js内容，其中我们要引入一个ImportExcel工具文件，文件在本部分的下面 4.Excel读取这个文件中利用了xlsx来读取内容并转为json，当然这个js文件网上有很多种写法，总之结果可正常转换为json就可以了，最重要的是获取键与值那部分代码 export function importEx(excelTitle, fileobj) { return new Promise((resolve, reject) => { var rABS = false; //是否将文件读取为二进制字符串var f = fileobjvar reader = new FileReader();FileReader.prototype.readAsBinaryString = function (f) { var binary = ""; var rABS = false; //是否将文件读取为二进制字符串 var wb; //读取完成的数据 var outdata; var reader = new FileReader(); reader.onload = function (e) { var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for (var i = 0; i excel导入的数据outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);let arr = []outdata.map(v => { // let jsonString = JSON.stringify(v).replace(/\*/g, '').replace(/\s/ig,''); let jsonString = JSON.stringify(v).replace(/\//g, ''); v = JSON.parse(jsonString); let obj = { } // 自动获取键与值 for (var k1 in v){ for (var et in excelTitle){ if (excelTitle[et].label==k1){ var col_key = excelTitle[et].propvar col_val = v[k1]obj[col_key] = col_val }} } arr.push(obj)})resolve(arr); } reader.readAsArrayBuffer(f);}if (rABS) { reader.readAsArrayBuffer(f);} else { reader.readAsBinaryString(f);}reader.onerror = reject; })}然后，后端代码就不用展示了，你就怼个对应的实体类随便接受吧 总结然后在需要进行导入操作的页面使用UploadEx组件，并且设置两个属性和一个方法，基本就可以完成操作了。 当然有好处也有坏处，不同的xlsx文件处理需要进行不同的设置，但是对于用户来说展示很友好，而且方便定义数据列名，但是对于一个文件几十个列，那就当我没说吧唉。大家可以对其自行扩展哦！ 转载地址：https://blog.csdn.net/qq_44209274/article/details/115632848 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！ |
点击确定导入后输出一下要传到后端的数据
【本文地址】
今日新闻 |
推荐新闻 |