前端学习JavaScript(2)--el-table/XLSX实现表格展示并导出Excel

Vue中el-table使用

<el-card class="result_panel_se" >
 <div class="result_container_se" style="min-height: 100px">
  <el-table id='resTable'  :data="tableData"  style="width:90%">
  	<el-table-column  fixed prop="createTime" label="日期" width="100" ></el-table-column>
  	<el-table-column  fixed prop="xx" label="xx" width="60"></el-table-column>
  </el-table>
  </div>
</el-card>

Vue部分

//tData为返回的list
new Vue({
	 el: '#resTable',
	  data() {
		return {
			tableData:tData
		}		
	  }
	});  

xlsx/FileSaver实现导出excel

引入

<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

实现

function getExcel()  {
	/* generate workbook object from table */
	 //表名,和上面el-table的id名一样
	 var wb = XLSX.utils.table_to_book(document.querySelector('#resTable'))
	 /* get binary string as output */
	 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
	 try {
	   saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'order.xlsx')
	 	} catch (e) { 
	 		if (typeof console !== 'undefined') console.log(e, wbout) 
	 	}
			 return wbout
	}

注意

1. 如果表格有fixed的，可能会导致下载的Excel有重复的数据，去除fixed即可，也有其他处理办法。