后端代码

添加依赖

首先安装依赖

1
2
3
4
5
6
<!--添加easyExcel-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.1.1</version>
</dependency>

设置excel表头映射文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@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请求，浏览器直接请求这个地址就会自动触发下载，前端也可以通过流的方式接收接口返回，然后处理文件下载，方法如下

拦截器处理返回

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

8558467.jpg

添加请求api

添加接口 api 请求

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

调用实现

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 点击导出按钮触发导出操作
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)
    })
}
,