springboot+vue使用easyExcel实现导出功能

之前使用easyExcel写的一个excel导出的功能，这里做一下简单的记录
1.添加 Alibaba easyExcel 依赖

<easyexcel.version>2.2.6</easyexcel.version>

<dependency>
	<groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>${easyexcel.version}</version>
</dependency>

2.编写导出工具类 ExcelUtils
添加以下导出方法：

/**
     * excel导出
     * @param response http响应对象
     * @param list 导出的list内容数据
     * @param clazz 导出的类型
     * @param fileNamePre 文件名（不含后缀）
     * @param sheetName sheet名
     * @throws IOException IO异常
     */
    public static void exportExcel(HttpServletResponse response, List list, Class clazz, String fileNamePre,String sheetName) throws IOException {
        // 导出时候会出现中文无法识别问题，需要转码
        String fileName = new String(fileNamePre.getBytes("gb2312"),"ISO8859-1");
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-Disposition","attachment;filename=" + fileName + ExcelTypeEnum.XLSX.getValue());
        // 调用工具类
        EasyExcel.write(response.getOutputStream(),clazz)
                .sheet(sheetName)
                .doWrite(list);
    }

3.在控制层调用导出

@ApiOperation(value = "用户信息导出", notes = "用户信息导出")
@PostMapping(value = "/export")
public void exportXls(@RequestBody UserRequireVo requireVo, HttpServletResponse response){
	// 这里的业务数据根据自己的业务场景去做查询
	List<UserDto> list = userService.getExcelList(getQueryWrapper(requireVo));
    try {
       	ExcelUtil.exportExcel(response,list,UserDto.class,"用户信息","用户信息");
    } catch (IOException e) {
       	e.printStackTrace();
    }
}

4.实体类添加相关注解

@Data
@ContentRowHeight(20) // 内容单元格高度
@HeadRowHeight(25) // 标题单元格高度
public class UserDto {

	@ExcelIgnore //忽略导出的字段
	@ApiModelProperty(value = "id")
    private String id;
	
    @ColumnWidth(10) // 单列单元格宽度(该注解也可以加在类上，即声明所有单元格的宽度)
    @ExcelProperty(value = "用户名",index = 0) // 属性设置(标题名 如果有公共标题 可以使用大括号来赋值 即{一级标题，二级标题},坐标顺序)
    @ApiModelProperty(value = "用户名")
    private String username;

    @ColumnWidth(10)
    @ExcelProperty(value = "昵称",index = 1)
    @ApiModelProperty(value = "昵称")
    private String nickname;

    @ColumnWidth(20)
    @ExcelProperty(value = "邮箱",index = 2)
    @ApiModelProperty(value = "邮箱")
    private String email;

    @ColumnWidth(20)
    @ExcelProperty(value = "联系电话",index = 3)
    @ApiModelProperty(value = "联系电话")
    private String phoneNumber;

    @ColumnWidth(10)
    @ExcelProperty(value = "性别",index = 4)
    @ApiModelProperty(value = "性别")
    private String sex;

    @ColumnWidth(15)
    @ExcelProperty(value = "出生日期",index = 5)
    @ApiModelProperty(value = "出生日期")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date birth;

    @ColumnWidth(15)
    @ExcelProperty(value = "部门名称",index = 6)
    @ApiModelProperty(value = "部门名称")
    private String name;
}

5.在vue中添加公共的导出js方法

// 列表信息导出(这里面有三个参数分别是查询条件，后端导出接口地址，文件名)
export const exportExcel=(requireVo,excelUrl,fileName) => {
  return request({
    method: 'post',
    url: excelUrl,
    responseType: 'blob',
    data: requireVo
  }).then(function (response) {
    let blob = new Blob([response.data])
    let downloadElement = document.createElement('a');
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = fileName; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
  }).catch(function (error) {
    this.$message.error(error)
  });
}

6.在对应页面调用导出方法

// 添加导出按钮并声明导出方法
<el-button type="warning" icon="el-icon-download" @click="exportData">导出</el-button>

// 导入excel公共导出方法
import { exportExcel } from '@/api/common'

// 调用导出方法
exportData(){
  exportExcel(this.requireVo,'/system/user/export','用户信息.xlsx')
}