vue+spring boot项目实现EasyExcel批量导入

最新推荐文章于 2024-10-21 16:51:50 发布

紫色充电宝

最新推荐文章于 2024-10-21 16:51:50 发布

阅读量1.8k

点赞数 2

分类专栏：后端

本文链接：https://blog.csdn.net/weixin_45001200/article/details/119511576

版权

本文介绍了如何使用EasyExcel框架在Vue和Spring Boot项目中实现Excel文件的批量导入。EasyExcel相比Poi降低了内存消耗，适合处理大量数据。在Vue前端，利用Element UI的Upload组件完成文件上传。在Spring Boot后端，配置文件上传限制，创建controller接口，定义实体类并使用@ExcelProperty和@ExcelIgnore注解，通过监听器将数据逐条读取并存入数据库。

摘要由CSDN通过智能技术生成

一、先来了解一下EasyExcel：
1、Poi和EasyExcel框架都能生成excel，但是poi框架非常耗内存，因此推荐使用easyexcel生成excel。EasyExcel是阿里巴巴开源的一个excel处理框架，easyexcel能够减少内存的消耗的主要原因是，在解析Excel时没有将文件数据一次性全部加载到内存中，而是从磁盘上一行行读取数据，逐个解析。
2、EasyExcel导入使用的场景：减轻录入工作量

二、vue前端代码实现
调用vue element-ui官网（https://element.eleme.io/#/zh-CN/component/upload）中的upload上传组件：
在这里插入图片描述
以批量导入通知信息为例，在Notice.vue中：

<template>
  <div>
      <el-upload
        class="upload-demo"
        drag
        action=""
        :http-request="upload"
        :before-upload="beforeUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过100M</div>
      </el-upload>
      <br/>
    </div>
<template>

调用了文件上传导入前和导入两个方法：

<script>
  export default {
      methods: {
          //导入
        beforeUpload: function(file) {
          let extension = file.name.substring(file.name.lastIndexOf('.')+1);
          let size = file.size / 1024 / 1024;
          if(extension !== 'xlsx') {
            this.$message.warning('只能上传后缀是.xlsx的文件');
          }
          if(size > 10) {
            this.$message.warning('文件大小不得超过10M');
          }
        },
        upload: function(param) {
          let formData = new FormData()
          formData.append('file', param.file)
          this.$a