Vue请求SSM的后台接口获得要导出Excel的数据
2018-11-06 17:33
796 查看
前言
Vue实现导出Excel,所需要的数据时通过异步请求后台获取,
后台将查询到的数据返回给前端,然后前端实现导出Excel。
Vue实现导出Excel:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83789067
现在来看怎样请求后端并获取数据的部分。
前端
点击按钮调用方法
[code]<el-button type="primary" class="mt_0 ml_1em bg_gray_777" @click="exportClick()">导出账单</el-button>
请求后台的方法
[code] //报表导出前的查询 exportClick(){ this.loading = true; exportMerchantBill(this.billForm).then(response => { debugger; this.loading = false; const data = response.data; this.exportList = data; //开始执行导出方法 this.export2Excel() }).catch(error => { debugger; this.loading = false console.log(error) }) },
在data中的billForm:
[code] billForm: { startDate: '', endDate: '', currentPage: 1, pageSize: 10, },
引入 exportMerchantBill
[code]import { searchMerchantBillPageResult,exportMerchantBill} from '@/api/account'
发起请求的方法
[code]export function exportMerchantBill(data) { return fetch({ headers: {"Content-Type": "application/json"}, url: '/merchant/bill/exportMerchantBill', method: 'post', data: { billForm: data } }) }
后台
action
[code]@Controller @RequestMapping("merchant/bill") public class MerchantBillSerialAction { private BusMerchantBillserialService service; @Autowired public void setServce(BusMerchantBillserialService service) { this.service = service; } @ResponseBody @RequestMapping("/exportMerchantBill") public Json<List<BusMerchantBillserialExt>> exportMerchantBill(@RequestBody Map map){ try { ParamBean reqJson = JSON.parseObject(JSON.toJSONString(map.get("billForm")), ParamBean.class); reqJson.setCurrentPage(null); reqJson.setPageSize(null); // 获取当前用户 JwtUserModel userModel = ResourceUtil.getCurrentUser(); PageResult<BusMerchantBillserialExt> pageResult = new PageResult<BusMerchantBillserialExt>(); Map<String,Object> param = pageResult.getParam(); if(reqJson.getStartDate()!=null) { reqJson.setStartDateStr(DateConvert.formatDateToString(reqJson.getStartDate(), DateStyle.YYYY_MM_DD) +" 00:00:00" ); param.put("startTime", reqJson.getStartDateStr()); } if(reqJson.getEndDate()!=null) { reqJson.setEndDateStr(DateConvert.formatDateToString(reqJson.getEndDate(), DateStyle.YYYY_MM_DD) +" 23:59:59" ); param.put("endTime", reqJson.getEndDateStr()); } param.put("merchantId", userModel.getUserId()); param.put("status",Constants.IS_DATA_STATUS); param.put("orderField","recordTime"); param.put("orderDirection","desc"); pageResult.setParam(param); List<BusMerchantBillserialExt> data= service.searchPageMerchantBillForExportByParam(param); return new Json<List<BusMerchantBillserialExt>>().success(data); } catch (Exception e) { LogService.getInstance(this).error("查询账单信息失败",e); return new Json<List<BusMerchantBillserialExt>>().fail(); } }
serviceImpl
[code]@Override public List<BusMerchantBillserialExt> searchPageMerchantBillForExportByParam(Map<String, Object> param) { if (!"".equals(param.get("orderField"))) { param.put("orderColumn", param.get("orderField")); } param.put("orderTurn", param.get("orderDirection")); List<BusMerchantBillserialExt> data = dao.getMerchantBillByParam(param); return data; }
相应的mapper以及model不再提供,这里只是展示大概的思想,具体代码要根据自己的业务去编写。
阅读更多相关文章推荐
- vue请求后台接口
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- 利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)
- [置顶] 工厂模式实现并发请求多个接口 (同步后台数据实现离线APP)
- 利用jxl 将数据从后台导出为excel
- vue+springmvc导出excel数据的实现代码
- Java 根据模板导出Excel时,如何根据后台数据设置复选框的勾选
- dede织梦系统怎样导出后台的文章或自定义模型中的数据到excel,并且不出现乱码
- vue如何从接口请求数据
- extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据
- ajax请求后台接口数据与返回值处理js的实例讲解
- 页面通过jquery上的ajax请求到后台通过POI导出Excel的问题
- java excel导出向后台请求方式
- Vue项目中将表格内的数据导出为Excel文件
- vue项目中列表数据导出为excel格式数据
- 如何从投票的网站的管理后台导出已投票的邀请码数据至Excel,并且稍修改,再导入到现场抽奖软件中?
- vue项目的webpack设置请求模拟数据的接口方法
- vue 使用 axios 发 post 请求,后台无法接收到数据
- http请求远程接口获得JSON数据(1) --- 利用HttpURLConnection发送post/get请求
- vue2.0 + element UI 中 el-table 数据导出Excel 。