首页vue嵌套表格导出excel

vue嵌套表格导出excel

时间: 2023-09-09 20:10:06 浏览: 203

要将嵌套表格导出为Excel，您可以使用以下步骤： 1. 安装 `xlsx` 库，可以使用 npm 安装： ```bash npm install xlsx --save ``` 2. 在需要导出的组件中，添加一个导出方法： ```javascript // 导出方法 exportExcel() { // 创建一个工作簿 const wb = XLSX.utils.book_new(); // 添加一个工作表 const ws = XLSX.utils.json_to_sheet(this.getTableData()); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作簿保存为Excel文件 XLSX.writeFile(wb, 'table.xlsx'); }, // 获取表格数据 getTableData() { // 定义表头 const header = ['姓名', '年龄', '性别', '成绩']; // 定义数据 const data = [ { name: '张三', age: 18, gender: '男', score: { math: 80, english: 90 } }, { name: '李四', age: 20, gender: '女', score: { math: 70, english: 85 } }, { name: '王五', age: 22, gender: '男', score: { math: 85, english: 95 } }, ]; // 将嵌套数据展开为一维数组 const flatData = data.map(item => { const score = item.score; return { name: item.name, age: item.age, gender: item.gender, math: score.math, english: score.english, }; }); // 将表头和数据合并为一个数组 const tableData = [header, ...flatData.map(item => Object.values(item))]; return tableData; }, ``` 3. 在模板中添加一个按钮，用于触发导出方法： ```html  <button @click="exportExcel">导出Excel</button> ``` 4. 运行应用程序并单击导出按钮，将会生成一个名为 `table.xlsx` 的Excel文件，其中包含表格数据。

阅读全文