Spring-boot + Element-UI 实现Excel导出

首先导入我们相对应的JAR包

<dependency>
    <groupId>org.jeecgframework</groupId>
    <artifactId>autopoi-web</artifactId>
    <version>1.3</version>
    <exclusions>
        <exclusion>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.9.4</version>
</dependency>

前台按钮事件即可(Element-UI)

<el-button
    icon="Download"
    type="primary"
    class="handle-del mr10"
    style="float: left;"
    plain
    @click="exportPay()"
>导出
</el-button>

封装一下我们的请求路径

封装一下我们的请求路径
data() {
  return {
    url: {
        "importUrl":"/pay/import",
        "exportUrl":"/pay/exportXls",
    },
  }
}

绑定单击事件调用函数

exportPay(){
  let param = {"stuId":this.query.stuId,"startTime":this.query.startTime,"stopTime":this.query.stopTime,"type":1};
  downFile(this.url.exportUrl, param);
},

封装downFile请求

export function downFile(url,parameter){
    return new Promise((resolve, reject) => {
        instance.get(url, {
            url: url,
            params: parameter,
            method:'get' ,
            responseType: 'blob'// responseType: 'blob'  这是是为后端返回时下载的类型   responseType 返回类型
        })
        .then((response) => {//ajax中的success
            resolve(response.data);
        })
        .catch((err) => {//执行失败后的  回调函数 error
            reject(err);
        });
    });
}

接下来是我们的后端服务

@GetMapping(value = "/exportXls")
@ApiOperation("导出exportXls")
public ModelAndView exportXls(HttpServletRequest request, PayParam query) {
    return this.export(request, query, Pay.class, "收入导出");
}
protected ModelAndView export(HttpServletRequest request, PayParam query, Class<Pay> clazz, String title) {
    //PayParam query 导出的条件, Class<Pay> clazz //导出的某个类, String title //导出的文件名称
    // Step.2 获取导出数据
    List<Pay> pageList = getListPay(query);
    List<Pay> exportList = null;
    // 过滤选中数据
    String selections = request.getParameter("selections");
    if (oConvertUtils.isNotEmpty(selections)) {
        List<String> selectionList = Arrays.asList(selections.split(","));
        exportList = pageList.stream().filter(item -> selectionList.contains(this.getId(item))).collect(Collectors.toList());
    } else {
        exportList = pageList;
    }
    ModelAndView mv = new ModelAndView(new JeecgEntityExcelView());
    mv.addObject(NormalExcelConstants.FILE_NAME, title); //此处设置的filename无效 ,前端会重更新设置一下
    mv.addObject(NormalExcelConstants.CLASS, clazz);
    //JwtUtil.getUserName(request)  根据用户的token解析出来的username 可自行封装
    ExportParams exportParams=new ExportParams(title + "报表", "导出人:" + JwtUtil.getUserName(request), title);
    exportParams.setImageBasePath(upLoadPath);
    mv.addObject(NormalExcelConstants.PARAMS, exportParams);
    mv.addObject(NormalExcelConstants.DATA_LIST, exportList);
    return mv;
}

//过滤查询出想同ID的数据进行导出
protected String getId(Pay item) {
    try {
        return PropertyUtils.getProperty(item, "pay_id").toString();
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

添加注解声名导出的字段

@Excel(name = "支付方式", width = 30)
private String payMethodStr;


@Excel()
name 对应的是表格的标题第一行的名称
width 对应的是每个单元格的大小

前端的同一返回过滤中进行过滤我们的导出

//返回之后的拦截器
instance.interceptors.response.use(respose=>{
    // 返回所有的 返回对应信息
    //所有请求完成之后来判断后台转过来的转台吗是否为5001
    let data = respose.data;
    console.log("请求的返回为",respose.data);
    if(respose.data.type === 'text/xml'){//判断是否是我们的导出请求
        ElMessage.success("导出成功");
        if (!respose.data) {
            this.$message.warning("文件下载失败")
            return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), "收入表格" + '.xls')
        } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', "收入表格" + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
        }
    }
    return respose;    
});

到这里就大公告成了恭喜有学会一招