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

2020-04-08  本文已影响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);
}

保存数据集合

    //添加多条信息(Excel导入)
    public void addSuppliers(List<Supplier> suppliers) {
        Integer num = suppliers.size();
        for(Integer i=0 ; i<num ; i++){
            addSup(suppliers.get(i));
        }
    }

2.前端实现

<!--上传资料-->
<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
如果有其他问题,欢迎留言讨论~

上一篇下一篇

猜你喜欢

热点阅读