Easypoi+SpringBoot+Vue+Elment-UI实现文件的到出功能（Excel）

不多说别的了，直接上代码。。。

前端：

点击事件：

导出

调用方法：

poiHandle () {
        this.$http({
          url: this.$http.adornUrl(`/biz/personbase/poi`),
          method: 'post',
          data: this.$http.adornData(this.dataPoiList, false),
          responseType: 'blob'
        }).then((res) => {
          // 将文件流转成blob形式
          const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
          let filename = 'test.xls'
          // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
          const elink = document.createElement('a')
          elink.download = filename
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        }).catch(() => {
          this.$message.error('导出失败')
        })
      }

分析：

在Elment中按钮点击请求可以访问后端接口，但无法获取返回后的够，也就是文件，通过创建新的链接事件进行请求的下载。

后端：

    @RequestMapping("/poi")
    @RequiresPermissions("biz:personbase:save")
    public void poiInfo(HttpServletResponse response,@RequestBody List personBasePoiForm){
        //导出操作
        ExportParams ex = new ExportParams("表头名", "Sheet名称");
        ex.setStyle(ExcelStyleUtil.class);
        Workbook workbook = ExcelExportUtil.exportExcel(ex,PersonBasePoiForm.class,personBasePoiForm);

        response.setHeader("content-Type","application/vnd.ms-excel");
        response.setHeader("Content-Disposition","attachment;filename="+System.currentTimeMillis()+".xls");
        response.setCharacterEncoding("UTF-8");
        try {
            workbook.write(response.getOutputStream());
            workbook.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

分析：

接受前台传递表格数据，在后台通过exportExcel将数据写入Excel中，在通过文件流的方式返回给前端请求。

实现效果：

欢迎大家评论留言

参考：keepTravel