ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-06-21 09:35:20  阅读:185  来源: 互联网

标签:vue java wb exportExcel excel fix 导出 document


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 },

标签:vue,java,wb,exportExcel,excel,fix,导出,document
来源: https://www.cnblogs.com/gsyy/p/16395684.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有