Vue + EasyExcel 实现下载

下载

vue

这里可能会出现的一个问题是，无法获取到文件名，需要springboot在响应头上将content-disposition暴露出来

let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名

即：

response.addHeader("Access-Control-Expose-Headers", "Content-disposition");

之前将content-disposition暴露出来，在js中也无法通过res.headers['Content-disposition']获取文件名，需要修改成小写的content-disposition

download() {
      axios({
        method: 'post',// 设置请求方式
        url: `http://localhost:8001/attendance2/exportAttendance`,// 设置请求地址
        data: this.exportForm,
        responseType: 'blob'
      }).then(function (res) {
        // 得到请求到的数据后，对数据进行处理
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
        let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名称,decodeURI：可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
        // console.log(fileName)
        if (fileName) {// 根据后端返回的数据处理文件名称
          fileName = fileName.substring(fileName.indexOf('=') + 1);
        }
        const link = document.createElement('a')// 创建一个a标签
        link.download = fileName;// 设置a标签的下载属性
        link.style.display = 'none';// 将a标签设置为隐藏
        link.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
        document.body.appendChild(link);// 将a标签添加到body中
        link.click();// 执行a标签的点击方法
        URL.revokeObjectURL(link.href) // 下载完成释放URL 对象
        document.body.removeChild(link)// 移除a标签
      })
    },

EasyExcel

Controller:

@ApiOperation(value = "导出考勤信息")
@PostMapping("exportAttendance")
public void exportAttendance(HttpServletResponse response, @RequestBody ExportForm exportForm){
    //        System.out.println(exportForm.toString());
    try {
        service.downloadAttendance(response, exportForm);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Service:

这里关键点的地方有以下几个：

响应头设置：

response.setHeader("Content-disposition", "attachment;filename=attendance.xlsx");
response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
//        设置response的内容类型为MicroSoft-excel
response.setContentType("application/vnd.ms-excel");

通过EasyExcel写入多个sheet

//            写入考勤记录sheet
WriteSheet writeSheet = EasyExcel.writerSheet(0, "考勤记录")
    .head(WriteAttendanceData.class)
    .build();
excelWriter.write(getAttendance(exportForm, workerDb), writeSheet);

//          写入加班记录sheet
writeSheet = EasyExcel.writerSheet(1, "加班记录")
    .head(WriteExtraData.class)
    .build();
excelWriter.write(getExtras(exportForm, workerDb), writeSheet);
//          写入请假记录sheet
writeSheet = EasyExcel.writerSheet(2, "请假记录")
    .head(WriteLeaveData.class)
    .build();
excelWriter.write(getLeaves(exportForm, workerDb), writeSheet);
//写完之后关闭流
excelWriter.finish();

WriteAttendanceData是自定义的类

@Data
public class WriteAttendanceData {
    @ExcelProperty("员工姓名")
    private String workerName;
    @ExcelProperty("员工账号")
    private String workerAccount;
    @ExcelProperty("考勤备注")
    private String note;
    @ExcelProperty("上班时间")
    private Date startTime;
    @ExcelProperty("下班时间")
    private Date endTime;
}

从数据库获取数据

 private List<WriteExtraData> getExtras(ExportForm exportForm, Worker worker) {
        QueryWrapper<Extra> extraQueryWrapper = new QueryWrapper<>();
        extraQueryWrapper.eq("worker_id", worker.getId());
        extraQueryWrapper.between("extra_time", exportForm.getStartTime(), exportForm.getEndTime());

        List<Extra> extras = extraService.list(extraQueryWrapper);

        List<WriteExtraData> writeExtraDataList = new ArrayList<>();
//        整理数据
        for (Extra extra: extras){
            String name = worker.getName();
            String account = worker.getAccount();
            String note = extra.getNote();
            Date extraTime = extra.getExtraTime();
            Double extraLength = extra.getExtraLength();

            WriteExtraData extraData = new WriteExtraData(
                    name,
                    account,
                    note,
                    extraTime,
                    extraLength
            );

            writeExtraDataList.add(extraData);
        }

        return writeExtraDataList;
    }