SpringBoot+Vue前端Http调用后台封装POI接口导出EXCEL

该文详细描述了使用Vue前端如何通过HTTP调用后端封装的POI接口来导出Excel文件。在接收到后端返回的arraybuffer响应后,文章展示了不同浏览器环境下如何处理并触发文件下载。同时,文章还列出了具体的请求参数结构,包括查询条件和数据组装,以及在下载异常时的错误处理机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文侧重描述VUE前端

一、后端封装POI接口

二、VUE Http调用后端

this.$myHttp({
      url: this.prefix +'/project/****List/exportView',
      data: dataParams,
      method:'post',
      responseType: 'arraybuffer'
}).then(res=>{
      if(res.status == '200'){
	      // 成功回调
	      const exportName = "确认清单.xlsx";
	      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
	      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
	        navigator.msSaveBlob(blob, exportName);
	      } else {
	        const link = document.createElement('a');
	        link.style.display = 'none';
	        var href = URL.createObjectURL(blob);
	        link.href = href;
	        link.setAttribute('download', exportName);
	        document.body.appendChild(link);
	        link.click();
	        document.body.removeChild(link);
	        window.URL.revokeObjectURL(href);
          }
	  }else {
	    this.$message({
	      message: '下载异常,请联系管理员!',
	      type: 'error',
	      duration: 1500,
	      onClose: () => {
	      }
	    });
      }
}).catch(e => {
      // 打印一下错误
      console.log('catch->' + e);
});

三、请求参数封装

var dataParams = {
      eid: this.myTableData.id,
      context: {dataCtx: this.dataCtx,webCtx: this.webCtx},
      entity:{},
      exportName: "确认清单.xlsx",
      pageCount :1,
      pageNum: 0,
      pageSize: -1,
      queryCode: 'getConfirmStatus',
      tableThead: this.myTableData.tableThead,
      url: 'project/*****List/exportView',
      viewCode: '****-list-confirm-grid-view-custom',
      where:[{
	    'field': 'applyid',
	    'opt': '=',
	    'value': this.parentViewData.applyid,
	    'assemble': 'and'
      }, {
	    'field': 'status',
	    'opt': 'in',
	    'value': '10,20',
	    'assemble': 'and'
      }]
};

四、重点参数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我也不清楚

有钱的捧个钱场,(~ ̄▽ ̄)~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值