实战10：SpringBoot和Vue实现导入导出

目录

1 、依赖

2、服务端导入导出代码

3、前端代码

---

1 、依赖

<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>

hutool官网：简介 | Hutool

2、服务端导入导出代码

@GetMapping("/export") 
public void export(HttpServletResponse response) throws Exception {
    List < User > list = userService.list();
    //通过工具类创建writer，写出到磁盘路径
    //ExportWriter writer = ExcelUtil.getWriter(filesuploadPath + "/用户信息.xlsx")
    //在内存操作，写出到浏览器
    // 通过工具类创建writer，默认创建xls格式
    ExcelWriter writer = ExcelUtil.getWriter();
    //自定义标题别名
    //        writer.addHeaderAlias("username","用户名");
    //        writer.addHeaderAlias("password","密码");
    //        writer.addHeaderAlias("nickname","昵称");
    //        writer.addHeaderAlias("email","邮箱");
    //        writer.addHeaderAlias("phone","电话");
    //        writer.addHeaderAlias("address","地址");
    //        writer.addHeaderAlias("createTime","创建时间");
    //        writer.addHeaderAlias("avatarUrl","头像");
    // 一次性写出内容，使用默认样式，强制输出标题
    writer.write(list, true);
    //设置浏览器响应格式
    //response为HttpServletResponse对象
    response.setContentType("application/vnd.openxmlformats-officedocument.preadsheetml;charset=utf-8");
    //fileName是弹出下载对话框的文件名，不能为中文，中文请自行编码
    String fileName = URLEncoder.encode("用户信息", "UTF-8");
    response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xls");
    ServletOutputStream out = response.getOutputStream();

    writer.flush(out, true);
    // 关闭writer，释放内存
    writer.close();
    //此处记得关闭输出Servlet流
    IoUtil.close(out);
}
@PostMapping("/import") 
public Boolean imp(MultipartFile file) throws Exception {
    InputStream inputStream = file.getInputStream();
    ExcelReader reader = ExcelUtil.getReader(inputStream);
    //       通过JavaBean的方式读取Excel内的对象，要求表头是英文，跟Javabean属性对应起来
    //        List<User> list = reader.readAll(User.class);
    //忽略表头的中文
    List < List < Object >> list = reader.read(1);
    List < User > users = CollUtil.newArrayList();
    for (List < Object > row: list) {
        User user = new User();
        user.setUsername(row.get(0).toString());
        user.setPassword(row.get(1).toString());
        user.setNickname(row.get(2).toString());
        user.setEmail(row.get(3).toString());
        user.setPhone(row.get(4).toString());
        user.setAddress(row.get(5).toString());
        user.setAvatarUrl(row.get(6).toString());
        users.add(user);
    }
    userService.saveBatch(users);
    return true;
}

 3、前端代码

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

   exp(){
      window.open("http://localhost:9090/user/export")
    },
    handleExcelImportSuccess(){
      this.$message.success("导入成功")
      this.load()
    }