vue+element+csv 实现导出功能

 

1. jar

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-csv</artifactId>
    <version>1.6</version>
</dependency>

2.vue页面

methods: {
    doExportEmail() {
      this.$confirm(
        `是否要导出指定条件下用户的邮箱`,
        {
          type: 'info'
        }
      )
        .then(() => {
          this.queryModel.exportFileName = 'usersEmail' //指定一个文件名 做下载使用
          exportEmail({
            query: this.queryModel
          })
            .then((resp) => {
              let filename = resp.headers['content-disposition'].split(';')[1].replace('filename=', '');
              let blob = new Blob([resp.data], {type: "text/csv"}); // 指定文件MIME
              let a = document.createElement('a');
              a.download = filename; // 指定下载的文件名
              a.href = URL.createObjectURL(blob); // URL对象
              a.click(); // 模拟点击
            })
            .catch(error => {});
        })
        .catch(() => {});
    },

3.java

@GetMapping("/export/email")
    @RequiresPermissions("user:info:export:email")
    public ResponseEntity exportEmail(HttpServletResponse response, @RequestParam Map<String, Object> map) throws UnsupportedEncodingException, FileNotFoundException {

        final List<UserEmailDetailVO> vos = userInfoService.getAllFiltrationUsersEmail(map);

        // 获取数据response.setHeader("content-type", "application/octet-stream");
        response.setContentType("application/octet-stream");

        // 下载文件能正常显示中文
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(map.get("exportFileName").toString() + ".csv", "UTF-8"));

        CSVFormat csvFormat = CSVFormat.EXCEL.
                withHeader("userId",  "email");

        try {
            CSVPrinter csvPrinter = new CSVPrinter(response.getWriter(), csvFormat);

            for (UserEmailDetailVO vo : vos) {

                if (Objects.nonNull(vo.getEmail()) && !"".equals(vo.getEmail())) {

                    csvPrinter.printRecord(vo.getUserId(), vo.getEmail());
                }
            }

            csvPrinter.flush();
            csvPrinter.close();

        } catch (IOException e) {
            e.printStackTrace();
        } finally {
        }

        return ResponseEntity.ok().build();
    }