element-ui table 导出Excel并解决数字列科学计数法问题

安装依赖

cnpm install --save xlsx file-saver

页面引入

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

添加方法

exportExcel() {
  /* 转换成excel时，使用原始的格式，解决数字列自动转科学计数法问题 */
  let xlsxParam = { raw: true };
  /* out-table关联导出的dom节点  */
  let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam);
  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), this.caption + '.xlsx');
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
}

导出事件绑定

<button @click="exportExcel()">导出</button>

给table添加id

<el-table id="out-table" :data="tableData" >
	...
</el-table>

学习1
2