springboot+vue导出excel

springboot+vue导出excel

本文讲述springboot使用easypoi跟前端vue进行excel的导出

一、后台

1.easypoi依赖

<!--easypoi的支持包-->
  <dependency>
      <groupId>cn.afterturn</groupId>
      <artifactId>easypoi-base</artifactId>
      <version>${easypoi.version}</version>
  </dependency>
  <dependency>
      <groupId>cn.afterturn</groupId>
      <artifactId>easypoi-web</artifactId>
      <version>${easypoi.version}</version>
  </dependency>
  <dependency>
      <groupId>cn.afterturn</groupId>
      <artifactId>easypoi-annotation</artifactId>
      <version>${easypoi.version}</version>
  </dependency>

2.接口

/**
     * @Anthor zyl
     * 导出excel
     * @param deviceRelationBoList
     * @param response
     * @Date 2021/7/26
     */
    @RequestMapping("exportExcel")
    public void exportDeviceList(@RequestBody List<DeviceRelationBo> deviceRelationBoList, HttpServletResponse response) {
     	log.info("进入到设备信息EXCEL导出接口，接收到的参数为：" + JSON.toJSONString(deviceRelationBoList));

        String fileName = "设备管理" + DataUtil.getStringByLocalDateTime(LocalDateTime.now(), "yyyyMMddhhmmss") + ".xls";
        log.info("下载的EXCEL文件名为：" + fileName);
        ExcelUtil.exportExcel(deviceRelationBoList, "设备管理", "家庭管理", DeviceRelationBo.class, fileName, response);
}

主要是 ExcelUtil.exportExcel这句进行导出。下面看说明：

1.deviceRelationBoList是你要导出的数据集合，我这里是由前端传过来的。
2."设备管理"为标题
3."家庭管理"为sheetName
4.fileName为文件名。

3.实体类

@Data
public class DeviceRelationBo extends BaseRoot<DeviceRelationModel, Long> {

    @Excel(name = "名称", orderNum = "2", width = 20)
    private String nickName;

    @Excel(name = "mac", orderNum = "3", width = 20)
    private String mac;

    @Excel(name = "型号key", orderNum = "4", width = 30)
    private String productKey;

    @Excel(name = "设备类型", orderNum = "5", width = 20)
    private String deviceTypeName;

    @Excel(name = "厂商", orderNum = "6", width = 20)
    private String deviceCompanyName;

    @Excel(name = "家庭", orderNum = "7", width = 20)
    private String homeName;

    @Excel(name = "主网关", orderNum = "8", width = 10)
    private String isMainGateway;

    @Excel(name = "更新时间", exportFormat="yyyy/MM/dd HH:mm:ss",importFormat = "yyyy/MM/dd HH:mm:ss", orderNum = "9", width = 30)
    private Date updateTime;

    //用于数据导出
    @Excel(name = "序号", orderNum = "1")
    private Long index;

    @Override
    protected void deserialize(DeviceRelationModel model) {

    }
}

实体类也比较简单。下面看说明：

1.在需要导出的属性上加@Excel注解就可以了。
2.name 为名称
3.orderNum为第几列
4.width为列宽

二、vue前端

export function exportGatewayComponentConfigExcel (parameter) {
  return request({
    url: new GatewayComponentConfigApi().exportGatewayComponentConfigExcel(),
    method: 'post',
    data: parameter,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })
}

这里只给出主要代码。下面请看说明：

1.parameter是你要导出的数据集合
2.url为接口地址
3.data是参数，也就是parameter
4.responseType设置为blob，否则无法导出
5.Content-Type为’application/json;charset=UTF-8’

三、总结

谢谢大家！！！