Vue 导入导出

后台

UserController有导入导出的接口示例，大家可以参考下。

1.先在pom.xml里面添加POI依赖

<dependency>
   <groupId>org.apache.poi</groupId>
   <artifactId>poi-ooxml</artifactId>
   <version>4.1.2</version>
</dependency>
​

2.写导出接口：

/**
 * Excel导出
 * @param response
 * @throws IOException
 */
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
​
    List<Map<String, Object>> list = CollUtil.newArrayList();
​
    List<User> all = userMapper.selectList(null);
    for (User user : all) {
        Map<String, Object> row1 = new LinkedHashMap<>();
        row1.put("用户名", user.getUsername());
        row1.put("昵称", user.getNickName());
        row1.put("年龄", user.getAge());
        row1.put("性别", user.getSex());
        row1.put("地址", user.getAddress());
        row1.put("角色", user.getRole());
        list.add(row1);
    }
​
    // 2. 写excel
    ExcelWriter writer = ExcelUtil.getWriter(true);
    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);
    writer.close();
    IoUtil.close(System.out);
}
​

3.导入接口

/**
 * Excel导入
 * 导入的模板可以使用 Excel导出的文件
 * @param file Excel
 * @return
 * @throws IOException
 */
@PostMapping("/import")
public Result<?> upload(MultipartFile file) throws IOException {
    InputStream inputStream = file.getInputStream();
    List<List<Object>> lists = ExcelUtil.getReader(inputStream).read(1);
    List<User> saveList = new ArrayList<>();
    for (List<Object> row : lists) {
        User user = new User();
        user.setUsername(row.get(0).toString());
        user.setNickName(row.get(1).toString());
        user.setAge(Integer.valueOf(row.get(2).toString()));
        user.setSex(row.get(3).toString());user.setAddress(row.get(4).toString());
        user.setRole(Integer.valueOf(row.get(5).toString()));
        saveList.add(user);
    }
    for (User user : saveList) {
        userMapper.insert(user);
    }
    return Result.success();
}
​

4.配置拦截器，如果不配做，会出现401的code（重要）

位置：com.example.demo.common.config.WebConfig.java

记得加完接口重启后台！

前台 User.vue

在页面加上导入导出

的按钮

在下面写上对应的方法：

​

<el-upload
  action="http://localhost:9090/user/import"
  :on-success="handleUploadSuccess"
  :show-file-list=false
  :limit="1"
  accept='.xlsx'
  style="display: inline-block; margin: 0 10px"
>
  <el-button type="primary">导入</el-button>
</el-upload>
<el-button type="primary" @click="exportUser">导出</el-button>

handleUploadSuccess(res) {
  if (res.code === "0") {
    this.$message.success("导入成功")
    this.load()
  }
},
exportUser() {
  location.href = "http://" + window.server.filesUploadUrl + ":9090/user/export";
},

OK！大功告成！

Excel文件示例：

​

写其他的导入导出模仿这个写就行了，Ctrl + C 、Ctrl + V ，稍微修改下字段即可！记得写完重启！