后端代码

添加依赖

首先安装依赖

<!--添加easyExcel-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.1.1</version>
</dependency>

设置excel表头映射文件

然后添加一个VO类，声明excel中的表头字段

package com.szx.edu.entity.vo;

import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;

@Data
@ExcelIgnoreUnannotated
public class ExportEventVo {
    @ExcelProperty(value = "订单号")
    String orderid;

    @ExcelProperty(value = "客户名称")
    String userName;

    @ExcelProperty(value = "客户电话")
    String userPhone;
}

添加 controller

编写 controller

@GetMapping("excelTable")
@ApiOperation("导出数据")
public void exportTable(HttpServletResponse response) throws IOException {
    //1、设定响应类型
    response.setContentType("application/vnd.ms-excel");
    //2、设定附件的打开方法为：下载，并指定文件名称为category.xlsx
    response.setHeader("content-disposition","attachment;filename=eventlist.xlsx");
    //3、创建工作簿
    ExcelWriterBuilder writeWork = EasyExcel.write(response.getOutputStream(), ExportEventVo.class);;
    //4、创建表格
    ExcelWriterSheetBuilder sheet = writeWork.sheet();
    //5、创建数据
    ArrayList<ExportEventVo> eventVos = new ArrayList<>();
    //6、调用业务层获取list数据
    List<EventList> allEvent = eventListService.getAllEvent();
    //7、遍历list集和往excel中添加数据
    for (EventList eventList : allEvent) {
        ExportEventVo vo = new ExportEventVo();
        // 订单号
        vo.setOrderid(eventList.getOrderid());
        // 客户名称
        vo.setUserName(eventList.getUserName());
        // 客户电话
        vo.setUserPhone(eventList.getUserPhone());
        // 添加
        eventVos.add(vo);
    }

    //8、写入数据到表格中
    sheet.doWrite(eventVos);
}

前端代码

这个方法时get请求，浏览器直接请求这个地址就会自动触发下载，前端也可以通过流的方式接收接口返回，然后处理文件下载，方法如下

拦截器处理返回

首先在请求拦截器中添加如下判断

添加请求api

添加接口 api 请求

// 导出事件
export function exportEventFun() {
  return request({
    method: 'get',
    url: `/edu/event-list/excelTable`,
    responseType: 'blob', // 使用blob下载
  })
}

调用实现

点击按钮调用接口触发下载

// 点击导出按钮触发导出操作
exportEvent() {
  exportEventFun().then((res) => {
    const objectUrl = URL.createObjectURL(
      new Blob([res.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      })
    )
    const link = document.createElement('a')
    // 设置导出的文件名称
    link.download = `案件列表` + '.xlsx'
    link.style.display = 'none'
    link.href = objectUrl
    link.click()
    document.body.appendChild(link)
  })
},