springboot + vue + easyexcel 实现简单的excel数据导入

最新推荐文章于 2024-09-18 16:30:10 发布

小雷的小胡

最新推荐文章于 2024-09-18 16:30:10 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： spring boot vue.js excel

本文链接：https://blog.youkuaiyun.com/weixin_45236540/article/details/133173357

本文介绍了如何在Java项目中使用EasyExcel库处理Excel文件数据导入，涉及SubjectVo实体类定义、服务层的文件读取和对象转换，以及Controller层的接口接收和处理上传的Excel文件。前端使用Vue的ElementUI实现文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入 easyexcel依赖

<dependency> 
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>${easyexcel.version}</version>
</dependency>

SubjectVo实体类

package com.ruoyi.subject.domain.vo;

import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
import com.alibaba.excel.annotation.ExcelProperty;
import com.ruoyi.common.annotation.ExcelDictFormat;
import com.ruoyi.common.convert.ExcelDictConvert;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;


/**
 * 学科视图对象 tb_subject
 *
 * @author ruoyi
 * @date 2023-09-22
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@ExcelIgnoreUnannotated
@ApiModel(value="学科 vo对象 ", description="学科vo对象 tb_subject")
public class SubjectVo {

    private static final long serialVersionUID = 1L;

    /**
     * 主键
     */
    @ApiModelProperty(value = "主键")
    private Long id;

    /**
     * 排序
     */
    @ApiModelProperty(value = "排序")
    @ExcelProperty(value = "排序")
    private Long sort;

    /**
     * 门类
     */
    @ExcelProperty(value = "门类", converter = ExcelDictConvert.class)
    @ExcelDictFormat(dictType = "subject_category")
    @ApiModelProperty(value = "门类")
    private String category;

    /**
     * 专业类
     */
    @ExcelProperty(value = "专业类", converter = ExcelDictConvert.class)
    @ExcelDictFormat(dictType = "speciality_type")
    @ApiModelProperty(value = "专业类")
    private String specialityType;

    /**
     * 上级学科代码
     */
    @ApiModelProperty(value = "上级学科代码")
    private String parentCode;

    /**
     * 学科代码
     */
    @ApiModelProperty(value = "学科代码")
    @ExcelProperty(value = "学科代码")
    private String code;

    /**
     * 学科名称
     */
    @ApiModelProperty(value = "学科名称")
    @ExcelProperty(value = "学科名称")
    private String name;

    /**
     * 学位授予门类
     */
    @ExcelProperty(value = "学位授予门类", converter = ExcelDictConvert.class)
    @ExcelDictFormat(dictType = "subject_category")
    @ApiModelProperty(value = "学位授予门类")
    private String degreeGrantingType;

    /**
     * 修业年限
     */
    @ApiModelProperty(value = "修业年限")
    @ExcelProperty(value = "修业年限")
    private String schoolingYears;

    /**
     * 增设年份
     */
    @ApiModelProperty(value = "增设年份")
    @ExcelProperty(value = "增设年份")
    private String addYear;



}

注意：导入的表格中所需要的字段在实体类中必须加上 @ExcelProperty()

2、service层

List<SubjectVo> importData(MultipartFile file)

3、serviceImpl层

  //数据导入
    @Override
    public List<SubjectVo> importData(MultipartFile file) throws IOException {
        List<SubjectVo> subjectVoList = EasyExcel.read(file.getInputStream())
                .head(SubjectVo.class)
                .sheet()
                .doReadSync();
        log.info("导入数据：{}",subjectVoList);
        if (null != subjectVoList){
            for (SubjectVo vo : subjectVoList) {
                Subject subject = new Subject();
                BeanUtils.copyProperties(vo,subject);//对象转换
                subject.setId(System.currentTimeMillis());
                subject.setDelFlag("0");
                baseMapper.insert(subject);
            }
        }
        return subjectVoList;
    }

4、controller层

 //数据导入
    @PostMapping("/importData")
    @ApiOperation("数据导入")
    public R<?> importData(@RequestPart("file") MultipartFile file) throws IOException {
        return R.ok(iSubjectService.importData(file));
    }

5、使用Apifox工具进行测试

6、vue前端页面

 <el-upload
          class="upload-demo"
          action="http://localhost:8080/subject/subject/importData"
          :show-file-list="false"
          :on-success="successCallback"
          :on-progress="progress"
          >
          <el-button size="small" type="primary">数据导入</el-button>
        </el-upload>

action为后端controller的接口，由于这种方式没设置token，所以，如果采用这种简单方法，需要将请求接口加入白名单放行。

其中：

:on-success是文件上传成功时调用的函数

:on-progress是文件上传时调用的函数

：show-file-list是是否显示已上传文件列表

successCallback函数：

successCallback(res,file,fileList){
      if (res.code == 200){
        this.$loading().close()
        this.$message.success("数据导入成功！")
        this.getList();
      }
    },

progress函数：

    progress(event,file,fileList){
      this.$loading({
        lock: true,
        text: "正在导入数据，请稍等...",
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.5)'
      })
    },

7、前端上传效果：