Vue请求SSM的后台接口获得要导出Excel的数据

川长思鸟来 2023-10-18 10:55 51阅读 0赞

### 前言 ###

Vue实现导出Excel，所需要的数据时通过异步请求后台获取，

后台将查询到的数据返回给前端，然后前端实现导出Excel。

Vue实现导出Excel:

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/83789067][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83789067]

现在来看怎样请求后端并获取数据的部分。

### 前端 ###

#### 点击按钮调用方法 ####

<el-button type="primary" class="mt_0 ml_1em  bg_gray_777" @click="exportClick()">导出账单</el-button>

#### 请求后台的方法 ####

//报表导出前的查询
          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: ####

billForm: {
              startDate: '',
              endDate: '',
              currentPage: 1,
              pageSize: 10,
            },

#### 引入 exportMerchantBill ####

import { searchMerchantBillPageResult,exportMerchantBill} from '@/api/account'

#### 发起请求的方法 ####

export function exportMerchantBill(data) {
      return fetch({
        headers: {"Content-Type": "application/json"},
        url: '/merchant/bill/exportMerchantBill',
        method: 'post',
        data: {
          billForm: data
        }
      })
    }

### 后台 ###

#### action ####

@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 ####

@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不再提供，这里只是展示大概的思想，具体代码要根据自己的业务去编写。

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83789067]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83789067