Vue 3 中导出 Excel 文件

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

方法 1：使用 SheetJS (xlsx)

安装 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

安装 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 则因其简单易用而受到许多开发者的喜爱。