博客

一、引入公共js：JeecgListMixin.js

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

二、js文件中的对应导出方法：handleExportXls

    handleExportXls(fileName){
   	  /***********文件名 ****************/
      if(!fileName || typeof fileName != "string"){      
        fileName = "导出文件"
      }
      
       /***********参数 ****************/
      let param = this.getQueryParams();                  
      if(this.selectedRowKeys && this.selectedRowKeys.length>0){
        param['selections'] = this.selectedRowKeys.join(",")
      }
      console.log("导出参数",param)
      
       /***********调用后端接口，返回流文件，创建a标签并自动触发点击事件 ****************/
      downFile(this.url.exportXlsUrl,param).then((data)=>{
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
        }else{
          //表示一个指定的file对象或Blob对象（前端接收后端文件流并下载）
          let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'})) 
          
          //创建a标签，并自动触发点击事件
          let link = document.createElement('a')         
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName+'.xls')
          document.body.appendChild(link)
          link.click()
          
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if(this.superQueryParams){
        sqp['superQueryParams']=encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },

三、按钮点击事件

	<a-button type="primary" icon="download" @click="handleExportXls('单表示例')">导出</a-button>

四、前端vue的data.return中添加要调的接口，例如：

    data() {
      return {
        url: {
          exportXlsUrl: "/test/jeecgDemo/exportXls"
        }
      }
    }