excel导出 java后端导出，前端vue导出

WHAT: 将html中表单导出成excel
WHY：在工作编码中，excel的导出非常频繁，因此实现学会这个非常必要
HoW: 可以前端解决，也可以后端解决

Java后端实现excel导出

添加需要的依赖
<dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency> <dependency> <groupId>cn.afterturn</groupId> <artifactId>easypoi-base</artifactId> <version>4.4.0</version> </dependency> <dependency> <groupId>cn.afterturn</groupId> <artifactId>easypoi-web</artifactId> <version>4.4.0</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>1.1.2-beta5</version> </dependency>>

java实现代码
`
@ApiOperation("导出Excel")
@GetMapping("/exportExcel")
public void exportExcel(HttpServletResponse response) throws IOException {
List

menuList = menuMapper.selectList(null);

    //生成Excel
    Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams("菜单列表信息", "菜单信息"), Menu.class, menuList);
    response.setHeader("content-disposition","attachment;fileName="+ URLEncoder.encode("菜单列表.xls","UTF-8"));
    ServletOutputStream outputStream = response.getOutputStream();
    workbook.write(outputStream);
    outputStream.close();
    workbook.close();
}`

vue前端部分
exportExcel() { window.open("http://localhost:8080/xtgl/exportExcel") //你访问的地址 // this.$request.get("/xtgl/exportExcel",null) },
实现效果

后端注意事项：
1.查询的是数据库中数据，若该表存在外键，数据存在其他表，处理起来有点麻烦，可以添加属性将需要的数据set进去，求教，因此适用于数据不需要处理导出
2.实体上需要加上excel注解，时间格式，宽度都可以在上面设置

前端导出
前端安装xlsx插件
npm run xlsx
npm install --save xlsx file-saver

<el-button size="small" type="primary" icon="el-icon-document-checked" @click="exportExcel('#printTest', '表格')">导出excel</el-button>
<el-table v-if="tableData" :data="filterData" highlight-current-row @current-change="handleCurrentCheck" border style="width: 100%" id="printTest"> <el-table-column header-align="center" align="center" width="30" fixed> <template slot-scope="scope"> <el-radio :label="scope.row.shouFeiJiLuID" v-model="tempRadio" @change="getTemplateRow(scope.row)"></el-radio> </template> </el-table-column> <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" prop="cheLiangJianCe.cheLiangXinXi.chePaiHaoMa" label="车牌号码"></el-table-column> <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" prop="shouFeiXiangMu.shouFeiXiangMuMingCheng" label="收费项目"></el-table-column> <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" prop="shouFeiJinE" label="收费金额"></el-table-column> <el-table-column :formatter="formatTime" header-align="center" align="center" :show-overflow-tooltip="true" prop="shouFeiShiJian" label="收费时间" ></el-table-column> <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" prop="caoZuoRenYuan" label="操作人员" ></el-table-column> <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" prop="beiZhu" label="备注"></el-table-column> </el-table>
//excel导出 exportExcel(){ let fix = document.querySelector('.el-table__fixed'); let wb; if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去 wb = XLSX.utils.table_to_book(document.querySelector('#printTest').removeChild(fix), { raw: true }); document.querySelector('#printTest').appendChild(fix); }else{ wb = XLSX.utils.table_to_book(document.querySelector('#printTest'), { raw: true }); } let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }); try { FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '收费记录.xlsx') } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout },

注意事项：生产的数据是重复了，因为el-table中fixed属性会创建两遍，上面的代码应该可以解决 printTest是选择器的名称

exportExcel(){ let fix = document.querySelector('.el-table__fixed'); let wb; if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去 wb = XLSX.utils.table_to_book(document.querySelector('#printTest').removeChild(fix), { raw: true }); document.querySelector('#printTest').appendChild(fix); }else{ wb = XLSX.utils.table_to_book(document.querySelector('#printTest'), { raw: true }); } let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }); try { FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '收费记录.xlsx') } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout },