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

我也不清楚

已于 2023-01-16 11:01:57 修改

阅读量518

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA 文章标签：前端 vue.js spring boot

于 2023-01-16 10:29:28 首次发布

本文链接：https://blog.youkuaiyun.com/chenyang_wei/article/details/128701084

JAVA 专栏收录该内容

13 篇文章

订阅专栏

该文详细描述了使用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'
      }]
};