java实现Excel导入功能(前端+后台)

java:导入功能的实现(前端+后台)

前端html代码

<form id="import-form" lay-filter="import-form" class="layui-form model-form" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px;">请选择上传文件：</label>
            <div class="layui-input-inline">
                <input type="file" name="file" id="file" class="layui-input"/>
            </div>
        </div>

    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" id="import-form-submit"  type="button" onclick="importSubmit()">确定</button>
    </div>
</form>

选择文件后ajax请求后台读取文件内容

  function importSubmit() {
    var config = layui.config;
    //请求的数据是FormData类型
    var formData = new FormData();
    //获取上传的文件
    formData.append("file",$("#file")[0].files[0]);
    //url为文件读取的后台controller请求路径
    var url = '###';
    //ajax提交请求，注意data、contentType、processData和dataType的设置
    $.ajax({
        type: "POST",
        url: url,
        data: formData,
        contentType: false,
        processData:false,
        dataType: "json",
        success: function(resp_data) {
            if (resp_data.resp_code==0){
                //js封装了admin对象
                var admin = layui.admin;
                //admin对象封装了缓存和弹窗方法
                admin.putTempData("importData",resp_data.data);
                //可以使用普通弹窗，弹出层用于文件解析后的页面渲染
                admin.popupCenter({
                    title: '导入内容',
                    area:['800px','600px'],
                    path: 'pages/import_form.html',
                    finish: function () {
                    //完成后可以根据自己需求刷新表格展示数据
                        layui.table.reload('mytable', {});
                    }
                });

            }else {
                if (resp_data.resp_msg) {
                    layui.layer.msg(resp_data.resp_msg, {icon: 2, time: 2000});
                }else {
                    layui.layer.msg(resp_data.msg, {icon: 2, time: 2000});
                }
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            if (xhr.status == 401) {
                localStorage.removeItem("access_token");
            }
        }
    });

}

用到的layui.admin对象封装的方法(可根据自己实际情况使用)

后台文件解析方法Controller

/**
 * 采用的是微服务框架，封装了Result对象，可以按自己实际情况封装返回的json数据内容
 * @param file
 * @return
 * @throws ControllerException
 * 使用的文件复制工具是spring框架提供的(导入包： import org.springframework.util.FileCopyUtils)，可以根据自己的实际情况使用文件字节流(FileInputStream、FileOutputStream)读写文件
 */
@PostMapping("/import")
public Result<List<Device>> importDevice(@RequestParam(value = "file",required = true) MultipartFile file) throws ControllerException{
    try{
        byte[] bytes = file.getBytes();
        File fileToSave =new File(file.getOriginalFilename());
        FileCopyUtils.copy(bytes,fileToSave);
        return deviceService.deviceImport(fileToSave);
    }catch (Exception e){
        throw new ControllerException(e);
    }
}

后台文件解析的处理逻辑service

/**
 * 导入内容读取解析
 * @param file
 * @return
 * @throws ServiceException
 * BeanUtils工具是spring提供的(导入包：import org.springframework.beans.BeanUtils)，对象复制可以使用传统的赋值方式
 * Import工具使用的是easypoi（导入包：import cn.afterturn.easypoi.excel.ExcelImportUtil;
import cn.afterturn.easypoi.excel.entity.ImportParams;）
     */
    @Override
    public Result<List<Device>>  import(File file) throws ServiceException {
       try {
           ImportParams params = new ImportParams();
           //读取Excel的数据，ImportExcel是自己封装的model对象，用于匹对接收导入的Excel内容
           List<ImportExcel> list= ExcelImportUtil.importExcel(file,ImportExcel.class,params);
           List<MyModel> myModelList = new ArrayList<>();
           for (ImportExcel  importExcel: list){
               MyModel  myMode l= new MyModel();
               BeanUtils.copyProperties(importExcel, myModel);
               myModelList.add(myModel);
           }
           return Result.succeed(myModelList,"导入成功");
       }catch (Exception e){
           throw new ServiceException(e);
       }
    }

ImportExcel内容格式（MyModel对象含有ImportExcel的所有变量，是数据库的映射对象）（导入文件的列名和name的声明对应）

    import cn.afterturn.easypoi.excel.annotation.Excel;
	import lombok.Data;
	
	import java.io.Serializable;
	import java.util.Date;
	import java.util.List;
	
	@Data
	public class ImportExcel implements Serializable {
	    private Long id;
	    @Excel(name = "名称",height = 20,width = 120,isImportField = "true_st")
	    private String name;
	    @Excel(name = "类型",height = 20,width = 100,isImportField = "true_st")
	    private String type;
	    @Excel(name = "日期",databaseFormat = "yyyyMMddHHmmss", format = "yyyy-MM-dd HH:mm:ss",height = 20,width = 110,isImportField = "true_st")
	    private Date productionDate;
	    @Excel(name = "性别",replace = {"男_0","女_1"},height = 30,width = 10,isImportField = "true_ts")
	    private Integer sex;
	} 

请求完成后的页面渲染

     //获取请求成功时保存的缓存数据
     var importData = layui.admin.getTempData("importData");
     //以表格的方式渲染，设置好表头，表体内容通过遍历请求成功的数据内容进行渲染
     var trContent='';
     $.each(importData,function (idx,item) {
         trContent='<tr><td><input name="name" class="layui-input" lay-verify="required"  value="'+(item.name==null?'':item.name)+'"  required/></td>';
         trContent+='<td><input name="type" class="layui-input" value="'+(item.type==null?'':item.type)+'" /></td>';
         trContent+='<td><input name="productionDate" class="layui-input" value="'+(item.productionDate==null?'':item.productionDate)+'" /></td>';
         trContent+='</tr>';
         //拼接表体内容
         $('#import-table tbody').append(trContent);
     });

导入内容保存请求时页面内容封装

  var myModelList=[];
  var trObjs = $('#import-table tbody tr');
   if (trObjs){
       for (var i=0;i<trObjs.length;i++){
           var myModelMap = new Map();
           var inputObjs = trObjs.eq(i).find("input");
           $.each(inputObjs,function (idx,item) {
             if (item.name){
                 myModelMap.set(item.name,item.value);
             }
           });
           //将map集合转成JSON对象后加入list集合
           myModelList.push(JSON.parse(mapToJson(myModelMap)));
       }
   }

map转json格式的普通字符串

 //map集合转成json格式的字符串
    function mapToJson(map) {
        var str = '{';
        map.forEach(function (value,key,mapObj) {
           str += '"' + key + '":"'+ value + '",';
        });
        //去除最后一个逗号
        str = str.substr(0,str.length-1) + '}';
        return str;
    }

注意事项(pom文件中使用的easypoi和apache.poi的版本需要一致)

 <dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-base</artifactId>
    <version>4.0.0</version>
    <exclusions>
        <exclusion>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-web</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-annotation</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml-schemas</artifactId>
    <version>4.0.0</version>
</dependency>

本文地址：https://blog.csdn.net/sinat_35225871/article/details/107660524