SDU项目实训——后台搭建——SpringBoot+Vue学习（九）

Springboot和Vue实现导入导出

1、pom中引入hutool依赖：

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.7.20</version>
</dependency>
 <dependency>
     <groupId>org.apache.poi</groupId>
     <artifactId>poi-ooxml</artifactId>
     <version>4.1.2</version>
 </dependency>

2、写出导出接口：
从数据库中查出所有数据：

 List<User> list = userService.list();

通过工具类创建writer 写出到磁盘路径

 ExcelWriter writer = ExcelUtil.getWriter(filesUploadPath + "/用户信息.xlsx");

在内存操作，写出到浏览器

ExcelWriter writer = ExcelUtil.getWriter(true);

自定义标题别名

 writer.addHeaderAlias("username", "用户名");
        writer.addHeaderAlias("password", "密码");
        writer.addHeaderAlias("nickname", "昵称");
        writer.addHeaderAlias("email", "邮箱");
        writer.addHeaderAlias("phone", "电话");
        writer.addHeaderAlias("address", "地址");
        writer.addHeaderAlias("createTime", "创建时间");
        writer.addHeaderAlias("avatarUrl", "头像");

一次性写出list内的对象到excel，使用默认样式，强制输出标题

writer.write(list, true);

设置浏览器响应的格式

 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        String fileName = URLEncoder.encode("用户信息", "UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");

写到输出流中：

        ServletOutputStream out = response.getOutputStream();
        writer.flush(out, true);
        out.close();
        writer.close();

3、导入接口：
通过 javabean的方式读取Excel内的对象，但是要求表头必须是英文，跟javabean的属性要对应起来，这里指定返回User类型，否则自动返回一个object类型。

 List<User> list = reader.readAll(User.class);

在User中写：

@ToString

相当于引入Tostring方法。

导入第二种方法：忽略表头的中文，直接读取表的内容

List<List<Object>> list = reader.read(1);
List<User> users = CollUtil.newArrayList();

4、vue导入：

<el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
  <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
</el-upload>

handleExcelImportSuccess() {
    this.$message.success("导入成功")
    this.load()
}

5、Vue导出：

<el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>

exp() {
	window.open("http://localhost:9090/user/export")
}

导出就会产生一个文件导入就是把文件传进去。