在Vue 3中实现Excel文件的导入和导出功能，你可以使用一些流行的JavaScript库，如SheetJS（也称为xlsx）来处理Excel文件。以下是实现这一功能的基本步骤：

1. 安装SheetJS

首先，你需要安装xlsx库。在你的Vue项目中，可以通过npm或yarn来安装：

npm install xlsx
# 或者
yarn add xlsx

2. 导入和导出Excel文件

导入Excel文件

你可以使用一个文件输入（<input type="file">）来让用户选择文件，然后读取文件内容。

<template><div><input type="file" @change="handleFileUpload" /><button @click="exportExcel">导出Excel</button></div>
</template><script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';const data = ref([]); // 存储Excel数据const handleFileUpload = (event) => {const files = event.target.files;if (files.length === 0) return;const file = files[0];const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];const jsonData = XLSX.utils.sheet_to_json(worksheet);data.value = jsonData; // 更新data为导入的Excel数据};reader.readAsArrayBuffer(file);
};
</script>

导出Excel文件

要导出数据到Excel文件，你可以使用XLSX.utils.book_new()创建一个新的工作簿，然后添加一个工作表并写入数据。最后，将工作簿转换为二进制数据，并使用URL.createObjectURL()创建一个下载链接。

<script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';const data = ref([ /* 示例数据 */ ]); // 示例数据，实际应用中应从用户导入的数据中获取或从其他来源获取const exportExcel = () => {const ws = XLSX.utils.json_to_sheet(data.value); // 将数据转换为工作表对象const wb = XLSX.utils.book_new(); // 创建新的工作簿对象XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作表添加到工作簿中，命名为"Sheet1"const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 将工作簿转换为二进制数据function s2ab(s) { return new Uint8Array(s); } // 辅助函数，将字符串转换为ArrayBuffer对象saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要额外安装）
};
</script>

3. 使用FileSaver库来保存文件（可选）

如果你需要创建一个下载链接并触发下载，可以使用FileSaver库。首先安装它：

npm install file-saver
# 或者
yarn add file-saver

然后在你的代码中引入并使用它：

import { saveAs } from 'file-saver'; // 从file-saver导入saveAs函数

确保在导出函数中使用saveAs来触发下载：

saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要额外安装）

这样，用户就可以通过点击按钮来导出Excel文件了。通过上述步骤，你可以在Vue 3应用中实现Excel文件的导入和导出功能。