大埔做网站社区建站网站系统
你可以通过下面的步骤使用Vue导出Excel表格：
- 安装依赖 安装两个依赖包：
npm install --save xlsx file-saver
- 创建Excel导出方法
//导出 Excel
exportExcel() {// 表格数据let data = this.tableData;// 转化为工作簿对象const workbook = XLSX.utils.book_new();// 表头const header = ['姓名','年龄','性别',];// 表头对应的键名const keys = ['name','age','gender',];// 表格数据处理const arr = [];data.forEach(item => {const obj = {};keys.forEach(key => {obj[key] = item[key];});arr.push(obj);});// 创建工作表const worksheet = XLSX.utils.json_to_sheet(arr, { header });// 将工作表添加到工作簿XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出 ExcelXLSX.writeFile(workbook, 'table.xlsx');
}
- 创建导出Excel的按钮
<template><div><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.gender}}</td></tr></tbody></table><button @click="exportExcel">导出 Excel</button></div>
</template>
现在你就可以导出Excel表格了。