你可以通过下面的步骤使用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'); // 导出 Excel XLSX.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表格了。
