美文网首页
【Springboot+Vue】 Excel资料导入/上传(含前

【Springboot+Vue】 Excel资料导入/上传(含前

作者: 曲凡学习笔记 | 来源:发表于2020-04-08 12:12 被阅读0次

    本案例为某后台管理系统信息导入模块,Excel格式是已知的(如,已知每列的数据类型,首行是表头)。

    1.后台接口实现

    主要工作:获取前端上传的文件流,进行解析;
    处理流程:
    1. 获取HSSFWorkbook对象,获取workbook表单的个数,进行遍历;
    2. 对于每一个表单,先获取行数,进行遍历,第一行跳过;
    3. 单元格的格式有多种,需在不同的switch分支中进行处理;(代码27-54行)
    4. 最后讲遍历得到的员工数据集合返回。

    public static Listexcel2Supplier(MultipartFile file) {
        List list =new ArrayList<>();
        Supplier supplier =null;
        try {
            //1. 创建一个 workbook 对象
            HSSFWorkbook workbook =new HSSFWorkbook(file.getInputStream());
            //2. 获取 workbook 中表单的数量
            int numberOfSheets = workbook.getNumberOfSheets();
            for (int i =0; i < numberOfSheets; i++) {
                //3. 获取表单
                HSSFSheet sheet = workbook.getSheetAt(i);
                //4. 获取表单中的行数
                int physicalNumberOfRows = sheet.getPhysicalNumberOfRows();
                for (int j =0; j < physicalNumberOfRows; j++) {
                    //5. 跳过标题行
                    if (j ==0) {
                            continue;//跳过标题行
                    }
                    //6. 获取行
                    HSSFRow row = sheet.getRow(j);
                    if (row ==null) {
                        continue;//防止数据中间有空行
                    }
                    //7. 获取列数
                    int physicalNumberOfCells = row.getPhysicalNumberOfCells();
                    supplier =new Supplier();
                    for (int k =0; k < physicalNumberOfCells; k++) {
                        HSSFCell cell = row.getCell(k);
                        //按照每一列的不同类型 获取数据
                        switch (cell.getCellType()) {   
                            //如果是String类型
                            case STRING:    
                                String cellValue = cell.getStringCellValue();
                                switch (k) {//看它是第几列的内容
                                    case 1:
                                        supplier.setSupplier_code(cellValue);
                                        break;
                                    //省略其他的 case
                                }
                                break;
                            default: {
                                switch (k) {
                                    //不同类型的获取函数不同:
                                    //日期类型:getDateCellValue()
                                    //数字类型:getNumericCellValue(),返回double值
                                    case 18:
                                        supplier.setStatus((int) cell.getNumericCellValue());
                                        break;
                                    //省略其他的 case
                                }
                            }
                            break;
                        }
                    }
                    list.add(supplier);
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        //返回搜集好数据的List
        return list;
    }
    

    在数据导入接口中调用上述方法

    • 代码流程:获取数据集合,插入数据库,代码如下:
    //上传Excel请求
    @PostMapping("/ImportSup")
    public void importSup(MultipartFile file){
        //获取数据集合
        List<Supplier> suppliers = ExceLIO.excel2Supplier(file);
        //插入数据库
        supplierService.addSuppliers(suppliers);
    }
    

    保存数据集合

    • 上述代码中调用的Service层函数addSuppliers() ,将数据集合插入数据库;
    • 实现方法:循环单条逐一插入,调用插入一条数据的函数addSup() ;
        //添加多条信息(Excel导入)
        public void addSuppliers(List<Supplier> suppliers) {
            Integer num = suppliers.size();
            for(Integer i=0 ; i<num ; i++){
                addSup(suppliers.get(i));
            }
        }
    

    2.前端实现

    • 直接采用 Element 的文件上传控件,代码如下:
    <!--上传资料-->
    <el-upload
        :show-file-list="false"
        accept="application/vnd.ms-excel"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
        :disabled="importDataDisabled"
        style="display: inline-flex;margin-right: 0"
        :action="actionup">
        <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">
            导入
        </el-button>
    </el-upload>
    

    其中,accept为接收文件类型;action为上传接口;
    data中定义 actionup : this.HOST + "/ImportSup" ,解决了跨域访问的问题。

    相关回调函数如下:

        beforeUpload() {
            this.importDataBtnText = '正在导入';
            this.importDataBtnIcon = 'el-icon-loading';
            this.importDataDisabled = true;
          },
          onError(err, file, fileList) {
            this.importDataBtnText = '导入数据';
            this.importDataBtnIcon = 'el-icon-upload2';
            this.importDataDisabled = false;
          },
          onSuccess(response, file, fileList) {
            this.importDataBtnText = '导入数据';
            this.importDataBtnIcon = 'el-icon-upload2';
            this.importDataDisabled = false;
            this.initEmps();
          }
    

    以上完整的实现了“Springboot+Vue后台管理系统”的Excel资料导入功能,这一过程中常遇到的BUG及解决方案请移步阅读:
    Springboot上传文件报错:java.lang.NullPointerException
    如果有其他问题,欢迎留言讨论~

    相关文章

      网友评论

          本文标题:【Springboot+Vue】 Excel资料导入/上传(含前

          本文链接:https://www.haomeiwen.com/subject/tfzzphtx.html