vue 前端解析Excel

第一次使用前端的xlsx来解析excel

首先惯例引入xlsx组件依赖

npm install xlsx

前端页面

<input style="position: absolute;width:100%;height: 100%;opacity: 0" type="file" ref="pathClear"id="implUserExcel" @change="implUserExcel" accept=".xlsx"/>

然后在页面需要用到导入Excel文件的地方引入

import XLSX from 'xlsx';

主要是前端页面处注册的implUserExcel函数

methods: {implUserExcel(e) {//导入用户信息this.$q.loading.show();let that = this;//拿到所导入文件的名字let fileName = e.target.files[0]//定义reader，存放文件读取方法let reader = new FileReader()//启动函数reader.readAsBinaryString(fileName)//onload在文件被读取时自动触发reader.onload = function (e) {let uploadData = [];//workbook存放excel的所有基本信息const workbook = XLSX.read(e.target.result, {type: 'binary'});//定义sheetList中存放excel表格的sheet表，就是最下方的tablet sheetList = workbook.SheetNames// 工作表名称集合sheetList.forEach((name) => {let worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表// for (let key in worksheet) {//     // v是读取单元格的原始值//     console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);// }uploadData.push(JSON.stringify(worksheet));});/** 保存数据 这里我采用的是直接将表格数据转为json，传递到后台进行处理 */that.$axiosHttp.axiosPost(url, {importData: uploadData}).then((result) => {that.$q.loading.hide();if (result.code == 200) {that.getData();that.$global.notify(result.msg);} else {that.$global.notifyNegative(result.msg);}})};},}

这里对于我来说比较麻烦的还是后台对数据的处理，因为 xlsx 解析后的数据像poi一样类似二维数组的关系，而是类似一维数组的存储格式。

这里我说一下我的后台处理思路，这里只是大概的将其转为类似二位数组的关系

    public Boolean saveImportData(String importData, Integer type, Date createTime) {if (createTime == null){createTime = new Date();}String pattern = "[A-Z]+[0-9]+";if (!StringUtils.isBlank(importData)){                                               //判断是否为空JSONArray sheets = JSONObject.parseArray(importData);                            //将其转为 sheets 数组//要存储的数据集合Map<String, Map> saveData = new HashMap<>();//for (int i = 0; i < sheets.size(); i++) {                                //判断 sheets 数据的数量JSONObject obj = JSONObject.parseObject(sheets.getString(0));       //默认取出一个sheet的所有属性Set<String> keys = obj.keySet();//获取最大行数和最大的列数for (String key: keys) {Pattern r = Pattern.compile(pattern);Matcher m = r.matcher(key);if (!m.matches()){ continue;}                       //如果匹配正则不过或者是被忽略的，则跳过Matcher matcher = Pattern.compile("[A-Z]").matcher(key);//获取列数Integer col = 0;while(matcher.find()) {char c = matcher.group().charAt(0);int ascii = c; //获取ASCII码col += (ascii - 65);}//获取行数Integer row = Integer.valueOf(key.split("[A-Z]+")[1]) -1;//看要保存的数据是否存在Map map = saveData.get(String.valueOf(row));if (map == null){map = new HashMap();saveData.put(String.valueOf(row), map);}map.put(col, JSONObject.parseObject(obj.getString(key)).get("v"));}// }//处理读取出来的数据集合Set<String> keySet = saveData.keySet();List<WorkshopTask> workshopTasks = new ArrayList<>();                       //存储的集合for (String key : keySet) {if ("0".equals(key) || "1".equals(key)){ continue; }                    //第一列第二列不需要/** 0:序号 1:姓名 2:内容 3:完成情况 4:评分 5:备注*/WorkshopTask workshopTask = new WorkshopTask();if (saveData.get(key).get(0) != null)workshopTask.setNo((Integer)saveData.get(key).get(0));if (saveData.get(key).get(1) != null)workshopTask.setRealName(String.valueOf(saveData.get(key).get(1)));if (saveData.get(key).get(2) != null)workshopTask.setContent(String.valueOf(saveData.get(key).get(2)));
//                if (saveData.get(key).get(3) != null)
//                  workshopTask.setStatus((Integer)(saveData.get(key).get(3)));
//                if (saveData.get(key).get(4) != null)
//                  workshopTask.setEstimate(String.valueOf(saveData.get(key).get(4)));if (saveData.get(key).get(5) != null)workshopTask.setRemark(String.valueOf(saveData.get(key).get(5)));workshopTask.setCreateTime(createTime);workshopTask.setType(type);workshopTasks.add(workshopTask);}return insertBatch(workshopTasks);}return false;}

具体的代码如上，以上就是我第一次使用xlsx解析excel的过程

vue 前端解析Excel相关推荐

前端解析Excel文件js-xlsx与bootstrapTable
前端解析Excel文件js-xlsx与bootstrapTable 1.引入xlsx.js 2.上传Excel按钮 3.读取Excel文件 4.结果 1.引入xlsx.js <script sr ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
js-xlsx 使用总结实现前端解析excel
背景解析excel数据,前端或后端都可实现,考虑到当前需求为导入并且预览表格数据,用户可对数据进行修改,最终提交的为用户修改后的数据,所以采用前端解析的方式更为合理. 依赖项 1.js-xlsx库 ...
js前端解析excel文件
使用纯Javascript解析excel文件. 使用的是开源的解析excel的js库:sheetjs.github地址:https://github.com/SheetJS/js-xlsx 首先引用J ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出
先看效果纯前端基础导出的Excel表格纯前端多级表头导出的Excel表格基础导出下面赋源代码 1.安装依赖 npm install vue-json-excel 2.在项目的入口 main.js ...
Java后端与Vue前端导出Excel表格文件并解决乱码和文件打不开
Java 需要用到 poi 两个依赖包,Maven如下:  &l ...
Vue 前端导出Excel表格，多级表头合并
针对有Excel导出经验安装依赖 npm install --save xlsx file-saver 引入以下文件 Blob.js /* eslint-disable */ /* Blob.js* ...
vue + XLSX解析excel数据
1.安装XLSX依赖. 2.通过input标签拿到file对象 // 拿到所导入文件的名字(file是input标签拿到的文件信息)let fileName = file//定义reader,存放文件 ...

vue 前端解析Excel

vue 前端解析Excel相关推荐

最新文章

热门文章