vue将table数据导出为Excel

安装第三方包

npm install xlsx file-saver

Vue

<template>
  <el-button @click="exportToExcel">导出为 Excel</el-button>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%">
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
  import { saveAs } from 'file-saver';
  //import * as XLSX from 'xlsx/xlsx.mjs';
  import * as XLSX from 'xlsx';
 
export default {
  data() {
	  return {
		  tableData: [
		  	{
		  		key1: value1,
		  		key2: value2,
		  		key3: value3
		  	},
		  	...
		  	],
		  	...
		  }
   }
   method: {
   		exportToExcel() {
            // const table = this.$refs.table.$el
            // const ws = XLSX.utils.table_to_sheet(table);
            const ws = XLSX.utils.json_to_sheet(this.tableData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
            saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), 'table.xlsx');
        },
        s2ab(s) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
   }
</script>