vue 实现excel
Vue 实现 Excel 功能
前端导出 Excel
使用 xlsx 库可以轻松实现前端 Excel 导出功能。安装依赖：
npm install xlsx导出 Excel 示例代码：
import * as XLSX from 'xlsx';
const exportToExcel = (data, fileName) => {
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, `${fileName}.xlsx`);
};
// 使用示例
const data = [
{ name: "张三", age: 25 },
{ name: "李四", age: 30 }
];
exportToExcel(data, "用户数据");前端导入 Excel
使用 xlsx 库实现 Excel 文件导入：
const handleFile = (file) => {
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(firstSheet);
console.log(jsonData); // 处理导入的数据
};
reader.readAsArrayBuffer(file);
};服务端生成 Excel
使用 Node.js 后端生成 Excel 文件：
const XLSX = require('xlsx');
const fs = require('fs');
const generateExcel = () => {
const data = [
{ name: "王五", age: 28 },
{ name: "赵六", age: 35 }
];
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "output.xlsx");
};高级功能
合并单元格示例：
const ws = XLSX.utils.aoa_to_sheet([
["合并单元格", , , ],
["A", "B", "C", "D"],
[1, 2, 3, 4]
]);
ws['!merges'] = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }
];设置单元格样式：
const ws = XLSX.utils.json_to_sheet(data);
ws['A1'].s = { font: { bold: true }, fill: { fgColor: { rgb: "FFFF0000" } } };性能优化
处理大数据量时建议：
- 使用流式处理
- 分块读取/写入
- Web Worker 避免阻塞UI
替代方案
其他可用库：
exceljs：功能更丰富，支持样式设置sheetjs：社区版免费，专业版需付费vue-json-excel：Vue专用插件
注意事项
- 浏览器兼容性：IE需要polyfill
- 文件大小限制：前端处理建议不超过10MB
- 安全考虑：导入数据需验证和清洗
