在Vue3中，可以使用第三方库如xlsx来导出Excel文件。
以下是一个基本示例：
一、Vue3 常规写法
安装xlsx库
首先，你需要安装xlsx库。使用以下命令进行安装：
npm install xlsx
导入函数
在Vue组件中，导入所需的函数：
import { writeFile } from 'xlsx';
创建模拟数据
创建一个函数来生成Excel文件的数据。这个函数应该返回一个二维数组，其中每一个嵌套的数组代表Excel文件中的一行数据。
function generateExcelData() {
const data = [
['Name', 'Age', 'Email'],
['John Doe', 30, '[email protected]'],
['Jane Smith', 25, '[email protected]']
];
return data;
}
创建点击事件
创建一个点击事件处理函数，用于触发导出Excel的操作。在这个函数中，你需要先调用generateExcelData函数获取数据，然后使用writeFile函数将数据导出为Excel文件。
export default {
methods: {
exportToExcel() {
const data = generateExcelData();
const workbook = {
Sheets: {
data: {
...data
}
},
SheetNames: ['data']
};
const excelBuffer = writeFile(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = 'data.xlsx';
downloadLink.click();
}
}
}
在这个示例中，我们首先创建一个workbook对象，它包含一个Sheets属性和一个SheetNames属性。Sheets属性中的data属性表示Excel文件中的一个工作表，它的值就是我们从generateExcelData函数中获取的数据。
然后，我们使用writeFile函数将workbook导出为Excel文件的二进制数据。接下来，我们创建一个Blob对象并使用它创建一个下载链接。最后，通过使用click方法模拟点击下载链接，即可触发Excel文件的下载。
添加按钮
在模板中添加一个按钮，用于触发导出Excel的事件：
<template>
<div>
<button @click="exportToExcel">Export to Excel</button>
</div>
</template>
现在，当用户点击"Export to Excel"按钮时，会触发exportToExcel方法，从而导出Excel文件。
二、Vue3 setup写法
在Vue 3中，可以通过在<script setup lang="ts">标签中使用xlsx库来实现导出Excel文件。
下面是一个详细的介绍：
安装
首先，确保已安装xlsx库。可以使用npm或yarn命令进行安装：
npm install xlsx
编写导出方法
在Vue组件中，创建一个导出Excel的方法。在<script setup lang="ts">标签中添加以下内容：
<script setup lang="ts">
import * as XLSX from 'xlsx';
const exportToExcel = () => {
// 创建一个工作簿
const workbook = XLSX.utils.book_new();
// 创建一个工作表
const worksheet = XLSX.utils.aoa_to_sheet([
['姓名', '年龄', '性别'],
['张三', '20', '男'],
['李四', '25', '女'],
['王五', '30', '男'],
]);
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 生成Excel文件
XLSX.writeFile(workbook, 'data.xlsx');
};
</script>
这段代码定义了一个名为exportToExcel的方法，用于导出Excel文件。在这个方法中：
首先，创建一个新的工作簿和工作表。
然后，使用XLSX.utils.aoa_to_sheet()方法将数据数组转换为工作表。
使用XLSX.utils.book_append_sheet()方法将工作表添加到工作簿。
最后，使用XLSX.writeFile()方法将工作簿保存为Excel文件。
添加导出按钮
在Vue模板中添加一个按钮或其他元素，用于触发导出Excel的方法：
<template>
<button @click="exportToExcel">导出Excel</button>
</template>
这样，当用户点击按钮时，exportToExcel方法将被调用，导出Excel文件。
上述代码是基于TypeScript语言的，如果您使用的是普通JavaScript，只需删除lang="ts"属性，并相应地更改脚本代码即可。
三、注意事项
在Vue 3中使用xlsx库导出Excel时，有一些需要注意的地方：
安装xlsx库：在使用xlsx库之前，需要确保已经安装了该库。可以使用npm或yarn命令进行安装：
npm install xlsx
引入xlsx库：在Vue组件中的<script setup>标签中，使用import * as XLSX from 'xlsx'引入xlsx库。
数据格式：xlsx库要求将数据转换为适当的格式才能导出为Excel文件。最常用的格式是二维数组，其中每个子数组代表一行数据。确保准备好的数据结构与xlsx库的要求相匹配。
工作簿和工作表：使用xlsx库时，需要创建工作簿和工作表来组织数据。可以使用XLSX.utils.book_new()创建一个新的工作簿，并使用XLSX.utils.aoa_to_sheet()将数据转换为工作表。
导出Excel文件：使用XLSX.writeFile()方法将工作簿保存为Excel文件。可以为Excel文件指定名称，并将其保存到指定位置。
在使用xlsx库导出Excel文件时，请确保数据格式正确，并将工作簿和工作表正确地添加到工作簿中。最后，使用XLSX.writeFile()方法保存工作簿为Excel文件。