vue实现导出excel表格
安装依赖库
使用xlsx和file-saver库实现Excel导出功能。xlsx用于处理Excel文件生成，file-saver用于保存文件到本地。
npm install xlsx file-saver --save准备数据
确保数据是一个数组，每个元素为对象，键名对应Excel表头，键值对应单元格内容。例如：
const data = [
{ name: '张三', age: 25, department: '技术部' },
{ name: '李四', age: 30, department: '市场部' }
];实现导出函数
在Vue组件中编写导出逻辑。将数据转换为工作簿（WorkBook），生成Excel文件并触发下载。
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
export default {
methods: {
exportToExcel() {
const worksheet = XLSX.utils.json_to_sheet(this.data);
const workbook = { Sheets: { 'Sheet1': worksheet }, SheetNames: ['Sheet1'] };
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, '导出数据.xlsx');
}
}
};添加触发按钮
在模板中添加按钮调用导出方法：
<button @click="exportToExcel">导出Excel</button>处理复杂数据
若需自定义表头或格式化数据，可手动构建工作表。例如修改表头名称：
const headers = { name: '姓名', age: '年龄', department: '部门' };
const formattedData = this.data.map(row => {
const newRow = {};
Object.keys(headers).forEach(key => {
newRow[headers[key]] = row[key];
});
return newRow;
});
const worksheet = XLSX.utils.json_to_sheet(formattedData);多Sheet支持
需要多个Sheet时，扩展工作簿对象即可：
const workbook = {
Sheets: {
'员工表': sheet1,
'统计表': sheet2
},
SheetNames: ['员工表', '统计表']
};注意事项
- 数据量过大时（超过10万行），建议分批次处理或使用Web Worker避免页面卡顿。
- 导出的Excel文件默认兼容
.xlsx格式，若需支持旧版.xls，修改bookType参数。
