使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解

使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出，主要步骤如下：

1.引入EasyExcel依赖

在pom.xml中引入EasyExcel依赖：

<!-- 引入EasyExcel -->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>easyexcel</artifactId>
  <version>2.2.10</version>
</dependency>

2.编写导入和导出接口

导入

使用EasyExcel，我们只需要编写读取Excel文件的逻辑即可。在SpringBoot中，我们可以使用@PostMapping注解将上传的文件读取，并将内容写入对应的实体类中。

@RestController
public class ExcelController {
  @PostMapping("/import")
  public void importExcel(MultipartFile file) throws IOException {
    List<ExcelData> dataList = EasyExcel.read(file.getInputStream()).head(ExcelData.class).sheet().doReadSync();
    // ....
  }
}

导出

同样的，我们使用EasyExcel的write方法来导出Excel文件。以下示例中，我们创建了一个名为ExcelData的实体类，其中包含了导出数据的字段。

@RestController
public class ExcelController {
  @GetMapping("/export")
  public void exportExcel(HttpServletResponse response) throws IOException {
    // 创建数据
    List<ExcelData> dataList = new ArrayList<>();
    ExcelData data1 = new ExcelData("张三", 18, "女");
    ExcelData data2 = new ExcelData("李四", 20, "男");
    dataList.add(data1);
    dataList.add(data2);

    // 设置Response Header
    response.setContentType("application/vnd.ms-excel;");
    response.setCharacterEncoding("utf-8");
    response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode("data.xlsx", "utf-8"));

    // 写入Excel文件
    ExcelWriter writer = EasyExcel.write(response.getOutputStream(), ExcelData.class).build();
    writer.write(dataList, EasyExcel.writerSheet("sheet1").build());
    writer.finish();
  }
}

3.编写前端页面

使用Vue来编写前端页面，需要引入axios库来进行文件上传和下载。

上传文件

在Vue页面中，我们可以使用el-upload组件来实现文件上传。以下示例中，我们编写了一个名为Import的组件，用于上传Excel文件。

<template>
  <el-card>
    <el-upload :show-file-list="false" :before-upload="beforeUpload" :on-success="afterImport">
      <el-button slot="trigger" size="small">导入数据</el-button>
    </el-upload>
  </el-card>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    beforeUpload(file) {
      this.form.file = file;
    },
    afterImport(response) {
      this.$message.success('导入成功');
    }
  }
}
</script>

export default {
  data() {
    return {
      form: {
        file: null
      }
    };
  },
  methods: {
    submit() {
      let formData = new FormData();
      formData.append('file', this.form.file);
      axios.post('/import', formData).then(response => {
        this.$message.success('导入成功');
      }).catch(error => {
        this.$message.error('导入失败');
      });
    }
  }
}

下载文件

同样的，我们可以使用el-button组件来实现文件下载。以下示例中，我们编写了一个名为Export的组件，用于下载Excel文件。

<template>
  <el-card>
    <el-button type="primary" icon="el-icon-download" :loading="loading" @click="download">导出数据</el-button>
  </el-card>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    download() {
      this.loading = true;
      axios.get('/export', { responseType: 'blob' }).then(response => {
        let filename = response.headers['content-disposition'].split(';')[1].split('=')[1];
        let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.click();
      }).catch(error => {
        this.$message.error('导出失败');
      }).finally(() => {
        this.loading = false;
      });
    }
  }
}
</script>

以上即为使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出的完整攻略。具体示例代码可以参考以下两个链接：

• SpringBoot+EasyExcel导入Excel示例：https://github.com/alibaba/easyexcel/blob/master/src/test/java/com/alibaba/easyexcel/test/demo/read/ReadTest.java
• Vue+axios实现文件上传和下载示例：https://www.cnblogs.com/djh-sky/p/10408720.html