前端实现element-ui table表格组件数据导出为excel表格

安装插件

npm install --save xlsx file-saver

封装导出方法

创建exportExcel.js文件

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

//导出
export default function exportExcel(name) {
	//转换成excel时，使用原始的格式
	var xlsxParam = { raw: true };
	let fix = document.querySelector(".el-table__fixed");
	let wb;
	//判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
	if(fix) {
		wb = XLSX.utils.table_to_book(
		document.querySelector("#tableId").removeChild(fix),xlsxParam);
		document.querySelector("#tableId").appendChild(fix);
	} else {
		wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
	}
	var wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(new Blob([wbout], { 
			type: "application/octet-stream" }), 
			`${name}_${new Date().getTime()}.xlsx`
		); 
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
	}
	return wbout;
}

页面引入方法

<template>
	<div>
		<el-button @click="exportTable">导出</el-button>
		<el-table id="tableId" :data="tableData" style="width: 100%">
		  <el-table-column  prop="date" label="日期" width="180"></el-table-column>
		  <el-table-column  prop="name" label="姓名" width="180"></el-table-column>
		  <el-table-column prop="address" label="地址"></el-table-column>
		</el-table>
	</div>
    
  </template>

  <script>
	import exportExcel from '@/utils/exportExcel.js'  

    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
	  methods:{
	  	exportTable(){
	  		exportExcel('表格')
	  	}
	  }
    }
  </script>