vue 前端解析Excel

 

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

首先惯例 引入xlsx组件依赖

npm install 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表，就是最下方的tab
                    let 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 saveData = new HashMap<>();
            //for (int i = 0; i < sheets.size(); i++) {                                //判断 sheets 数据的数量
            JSONObject obj = JSONObject.parseObject(sheets.getString(0));       //默认取出一个sheet的所有属性
            Set 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 keySet = saveData.keySet();
            List 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的过程