SpringBoot+VUE使用easyexcel导出excel，并在浏览器下载

admin管理员组

文章数量:1535119

一、需求

把前端数据导出excel表格

二、解决

后端部分

1. 依赖

<dependency>
 	<groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.2.6</version>
</dependency>           

2. 创建实体类
   该类属性对应你要导出的excel的表头

 @Data
public class ImportExcelParam {
    @ExcelProperty(value = "订单号", index = 0)
    //使用该注解绑定值到excel，value对应表格表头，index对应哪一列
    private String orderNum;
    @ExcelProperty(value = "订单状态", index = 1)
    private String statusName;
 }

3、service层写方法

public void importReport(HttpServletResponse response,QueryClearOrderInfoParam param) throws IOException {
            String fileName = new String("导出excel.xlsx".getBytes(), StandardCharsets.ISO_8859_1);
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf8");
            response.setHeader("Content-disposition", "attachment;filename=" + fileName );
            EasyExcel.write(response.getOutputStream(), ImportExcelParam.class).sheet("模板").doWrite(data(param));
    }

另：如果你不需要导出实体类中的某个属性，按照下面的操作进行

public void importReport(HttpServletResponse response,QueryClearOrderInfoParam param) throws IOException {
            String fileName = new String("导出excel.xlsx".getBytes(), StandardCharsets.ISO_8859_1);
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf8");
            response.setHeader("Content-disposition", "attachment;filename=" + fileName );
            Set<String> excludeColumnFiledNames = new HashSet<>();
            excludeColumnFiledNames.add("arrears");//某个你不要的属性名
            //这里需要注意的是该属性需在最后一位，否则会把该属性及其后面属性都截取掉
            EasyExcel.write(response.getOutputStream(), ImportExcelParam.class).excludeColumnFiledNames(excludeColumnFiledNames).sheet("模板")
                    .doWrite(data(param));
    }

//该方法把获取到的数据赋值给excel

private List<ImportExcelParam> data(QueryClearOrderInfoParam param){
        List<ImportExcelParam> excelParamList = Lists.newArrayList();
        List<Order> order= queryList(param);//获取数据的方法
        if (!CollectionUtils.isEmpty(order)) {
            order.forEach(item ->{
                ImportExcelParam importExcelParam = new ImportExcelParam();
                importExcelParam.setOrderNum(item.getOrderNum());
                importExcelParam.setStatusName(item.getStatusName());
                excelParamList.add(importExcelParam);
            });
        }
        return excelParamList;
    }

controller层调用importReport方法就行了

到此后端的处理就结束了

前端部分

1. 首先要引入后端方法

import {
  axios
} from '@/utils/request'
const PRE = '/order/orderInfo'
export const importReport = (data) => {
  return axios({
    url: PRE + '/importReport',
    data,
    method: 'post',
    responseType: 'blob'//这里注意一定要把返回值类型改为blob
  })
}

2. 调用方法，下载excel

downloadReport(){
    let query = {}
    importReport(Object.assign(query, this.queryParam)).then(res =>{
      downloadExcel(res.data,"导出excel.xlsx")
    })
}

这里的downloadExcel()方法

export function downloadExcel (blobPart, filename) {
  const blob = new Blob([blobPart], { type: 'application/vnd.ms-excel' })
  console.log('downloadExcel', blob.size)
  // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
  const elink = document.createElement('a')
  elink.download = decodeURIComponent(filename)
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  document.body.removeChild(elink)
}

到这里问题就解决了！！！

本文标签： 并在浏览器vueSpringBootExcel