Spring Boot + EasyPoi实现数据导出

项目需求：

将前端展示的数据导出为Excel 使用户可以下载到本地进行查看或其他用途

选用的实现方式是使用EasyPOI

官方文档：http://doc.wupaas.com/docs/easypoi

参考教程：B站云E办教学视频

后端代码

1. 导入依赖

<!-- 导入EasyPoi的SpringBoot依赖 -->
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-spring-boot-starter</artifactId>
    <version>4.1.3</version>
</dependency>

2. 修改实体类

EasyPoi可以使用注解来定义需要导出到Excel中的字段

@Excel(name="xx", width=xx, format="yyyy--MM-dd")
//name属性用于设置导出到Excel中的列名 
//width属性用于设置列宽 
//format属性设置用于时间格式

修改需要导出的实体类 在需要导出的字段上添加@Excel注解

3. 编写Controller

步骤:

1. 准备需要导出的数据
2. 借助EasyPoi封装需要导出的数据
3. 以流的形式返回Excel文件

//produces = "application/octet-stream" 设置流的方式返回 防止中文乱码
@GetMapping(value = "/export", produces = "application/octet-stream")
//导出数据的方法返回类型为void
public void exportReservoir(HttpServletResponse response){
    //1. 查询需要导出的数据
    List<Reservoir> list = reservoirService.selectReservoirAll();
    //2. 调用EasyPoi封装导出的数据 
    //2.1 创建ExportParams类 指定Excel表的Title、SheetName以及后缀名(HSSF和XSSF)
    ExportParams params = new ExportParams("水库信息表", "水库信息表", ExcelType.HSSF);
    //2.2 创建一个工作簿(Workbook)对象
    Workbook workbook = ExcelExportUtil.exportExcel(params, Reservoir.class, list);
    //以流的形式返回给前端
    ServletOutputStream out = null;
    try {
        //设置响应头信息以流形式返回
        response.setHeader("Content-Type", "application/octet-stream");
        //设置响应头中的Content-Disposition信息暴露出来 可以被客户端获取
        response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
        //设置响应头信息防止中文乱码
        response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode("水库信息表.xls", "UTF-8"));
        out = response.getOutputStream();
        workbook.write(out);
    } catch (IOException e) {
        e.printStackTrace();
    }finally {
        try {
            //关闭流
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

前端代码

Axios不提供下载功能 需要安装js-file-download插件

1. 编写请求脚本

import axios from 'axios'

const service = axios.create({
    
    
    // 设置Axios的响应类型为 arraybuffer 因为后端响应的是流数据
    responseType: 'arraybuffer'
})

// 响应拦截器 拦截后端的响应
service.interceptors.response.use(resp => {
    
    
    const headers = resp.headers;
    console.log(headers)
    let fileDownload = require('js-file-download');
    //获取文件名
    let fileName= headers['content-disposition'].split(';')[1].split('filename=')[1];
    let contentType = headers['content-type'];
    // 防止文件名中文乱码
    fileName = decodeURIComponent(fileName);
    fileDownload(resp.data, fileName, contentType);
}, error => {
    
    
    console.log(error)
})

export const downloadRequest = (url, params)=> {
    
    
    return service({
    
    
        method: 'get',
        url: `${
      
      url}`,
        data: params
    })
}

export default service;

2. 发送请求

在main.js中导入该脚本文件

import {
    
     downloadRequest } from './util/download'

// 插件形式使用
Vue.prototype.downloadRequest = downloadRequest;

之后在需要用到的组件中使用 一般是有一个导出按钮 点击后发送请求给后端调用对应的方法返回Excel文件

<template>
    <el-button @click="exportData" type="primary">导出数据</el-button>
</template>
<script>
    methods: {
        // 导出数据为Excel
        exportData(){
           this.downloadRequest('http://127.0.0.1:8088/reservoir/export');
        },
    }
</script>