若依vue 多table前端HTML页面导出一张Excel表

**Vue多Table前端导出Excel**

在实际的开发中，我们经常需要将数据导出为Excel文件，以便用户可以更方便地处理和分析这些数据。Vue提供了一个强大的库——`xlsx`，可以帮助我们实现这一功能。

### 安装依赖首先，我们需要安装`xlsx`库：

bashnpm install xlsx

javascript// src/utils/exportExcel.jsimport XLSX from 'xlsx';

const exportExcel = (tableData, filename) => {
 const tHeader = ['ID', '名称', '年龄']; // 表头 const filterVal = ['id', 'name', 'age']; // 对应的数据列 const data = tableData.map((item, index) => {
 return Object.keys(item).map(key => item[key]);
 });

 const excelData = XLSX.utils.json_to_sheet(data);
 const excelBuffer = XLSX.write(excelData, { bookType: 'xlsx', type: 'buffer' });
 XLSX.writeFile(excelBuffer, `${filename}.xlsx`);

 return true;
};

export default exportExcel;

javascript// src/views/Table.vue<template>
 <div>
 <el-table :data="tableData" style="width:100%">
 <el-table-column prop="id" label="ID" width="180"></el-table-column>
 <el-table-column prop="name" label="名称" width="180"></el-table-column>
 <el-table-column prop="age" label="年龄" width="180"></el-table-column>
 </el-table>

 <button @click="exportExcel">导出Excel</button>
 </div>
</template>

<script>
import exportExcel from '@/utils/exportExcel';

export default {
 data() {
 return {
 tableData: [
 { id:1, name: '张三', age:25 },
 { id:2, name: '李四', age:30 },
 { id:3, name: '王五', age:35 }
 ]
 };
 },
 methods: {
 exportExcel() {
 const filename = 'my_excel';
 exportExcel(this.tableData, filename);
 }
 }
};
</script>