Vue 3 中导出 Excel 文件

在 Vue 3 中导出 Excel 文件，通常可以使用一些流行的 JavaScript 库，如 SheetJS (xlsx) 或者 exceljs。这里我将分别介绍如何使用这两个库来在 Vue 3 应用中导出 Excel 文件。

方法 1：使用 SheetJS (xlsx)

1. 安装 SheetJS

   首先，你需要安装 xlsx 库。在你的 Vue 项目中运行以下命令：

npm install xlsx

      2.在 Vue 组件中使用 xlsx

然后，你可以在 Vue 组件中导入并使用 xlsx 来创建和导出 Excel 文件。

<template><button @click="exportToExcel">导出 Excel</button>
</template><script setup>
import * as XLSX from 'xlsx';const exportToExcel = () => {// 创建工作表数据const data = [["姓名", "年龄", "职业"],["张三", 28, "工程师"],["李四", 35, "设计师"],["王五", 29, "教师"]];// 创建工作表const ws = XLSX.utils.aoa_to_sheet(data);// 创建工作簿并添加工作表const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "Sheet1");// 导出 Excel 文件XLSX.writeFile(wb, "example.xlsx");
};
</script>

方法 2：使用 exceljs

1. 安装 exceljs

   在你的 Vue 项目中安装 exceljs：

npm install exceljs

  2.在 Vue 组件中使用 exceljs

<template><button @click="exportToExcel">导出 Excel</button>
</template><script setup>
import ExcelJS from 'exceljs';const exportToExcel = async () => {// 创建工作簿和工作表const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('My Sheet');// 添加数据到工作表worksheet.addRow(['姓名', '年龄', '职业']);worksheet.addRow(['张三', 28, '工程师']);worksheet.addRow(['李四', 35, '设计师']);worksheet.addRow(['王五', 29, '教师']);// 设置列宽等（可选）worksheet.columns.forEach(column => { column.width = 20; });// 导出 Excel 文件到浏览器或保存到服务器（示例：浏览器下载）workbook.xlsx.writeBuffer().then((buffer) => {const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'example.xlsx';a.click();URL.revokeObjectURL(url); // 释放内存中的 URL 对象资源。});
};
</script>

以上两种方法都可以在 Vue 3 中实现 Excel 文件的导出。你可以根据自己的需求选择合适的库。如果你需要处理更复杂的 Excel 文件（如包含图片、公式等），exceljs 可能提供更多灵活性和功能。而 xlsx 则因其简单易用而受到许多开发者的喜爱。