vue导出excel表格

以下是使用vue导出excel表格的示例代码：

1. 安装依赖：

npm install file-saver xlsx

2. 创建一个导出Excel的方法：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export function exportExcel(data, fileName) {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, fileName);
}

3. 在组件中使用：

<template>
<div>
<button @click="exportData">导出Excel</button>
</div>
</template>

<script>
import { exportExcel } from '@/utils';

export default {
name: 'ExportExcel',
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' }
]
};
},
methods: {
exportData() {
exportExcel(this.tableData, '员工信息.xlsx');
}
}
};
</script>

在示例中，我们定义了一个名为exportExcel的方法，该方法接受两个参数：数据和文件名。它使用xlsx库将JSON数据转换为工作表并将其添加到工作簿中。最后，它将Excel文件保存到用户的计算机上。在组件中，我们定义了一个名为exportData的方法，在点击按钮时调用该方法以导出Excel数据。