Vue 前端导出 Excel 文件：使用 xlsx 库实现数据导出 - 详细教程

在 Vue 前端中，你可以使用 xlsx 库来导出 Excel 文件。首先，你需要安装该库。\n\n\nnpm install xlsx\n\n\n然后，你可以在 Vue 组件中使用以下代码来导出 Excel 文件：\n\nvue\n<template>\n <div>\n <button @click="exportExcel">导出 Excel</button>\n </div>\n</template>\n\n<script>\nimport XLSX from 'xlsx';\n\nexport default {\n methods: {\n exportExcel() {\n const data = [\n ['姓名', '年龄', '性别'],\n ['张三', 20, '男'],\n ['李四', 25, '女'],\n ['王五', 30, '男']\n ];\n\n const sheet = XLSX.utils.aoa_to_sheet(data);\n const workbook = XLSX.utils.book_new();\n XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');\n XLSX.writeFile(workbook, 'data.xlsx');\n }\n }\n}\n</script>\n\n\n在上面的代码中，我们定义了一个按钮，并在按钮的点击事件中执行了 exportExcel 方法。该方法首先定义了要导出的数据，然后使用 XLSX.utils.aoa_to_sheet 方法将数据转换为 Excel 表格的数据格式。接下来，我们创建一个工作簿，将表格数据添加到工作簿中，并使用 XLSX.writeFile 方法将工作簿保存为 Excel 文件。\n\n当用户点击"导出 Excel"按钮时，浏览器将自动下载名为"data.xlsx"的 Excel 文件，其中包含我们定义的数据。