element 分页表格完整的前端全部导出至excel方法

1.npm 安装

cnpm install --save xlsx file-saver

2.script 中引入

  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

3.methods 中创建导出方法

思路:将每页条数变成变为表格总数据的值(total),导出表格后,还原表格pagesize。
遇到的问题:
使用this.$nextTick(() => {})失效
使用 setTimeout(() => {this.handleSizeChange(“close”) }, 1000);才能解决。

 handleExport() {
 			//❤重要:将pageSize变成表格总条数  this.pageSize=this.total;
 			this.handleSizeChange('open')
 			
		//----普通导出
          let tableDom,tableName;
          tableDom = document.querySelector('#isTable .el-table__fixed');
          //表名 = **表 +下载时间
            tableName =  '***表'+ util.formatDate.format(new Date(), "yyyy-MM-dd") +'.xls';
          var wb = XLSX.utils.table_to_book(tableDom, {raw: true});
          /* get binary string as output */
          var wbout = XLSX.write(wb, { bookType: 'xls', bookSST: true, type: 'array' })
          try {
              FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), tableName)
          } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
          //
		//---以上为普通
		//❤恢复之前的pageSize-每页条数的值,还原表格
          setTimeout(() => {
              this.handleSizeChange("close")
          }, 1000)
          return wbout;
      },

4.

 handleSizeChange(val) {
        if(val=='open'){
          this.pageSize=this.total;
           setTimeout(() => {
            this.handleExport()
            }, 1000)
        }else if(val=='close'){
          this.pageSize = 20;
         this.pageIndex = 1;
        }else{
        this.pageSize = val;
        this.pageIndex = 1;
        }
        this.pageInit();
      },

你可能感兴趣的:(vue,element,table)