vue实现excel导入导出
Vue 实现 Excel 导入导出
安装依赖
使用 xlsx 库处理 Excel 文件，安装命令如下：
npm install xlsxExcel 导入实现
通过 <input type="file"> 获取文件，使用 xlsx 解析数据。
<template>
<input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
</template>
<script>
import * as XLSX from 'xlsx';
export default {
methods: {
handleFileUpload(event) {
const file = event.target.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);
console.log(jsonData); // 处理导入的数据
};
reader.readAsArrayBuffer(file);
}
}
};
</script>Excel 导出实现
将数据转换为 Excel 文件并下载。
<template>
<button @click="exportToExcel">导出 Excel</button>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
data() {
return {
exportData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
]
};
},
methods: {
exportToExcel() {
const worksheet = XLSX.utils.json_to_sheet(this.exportData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, '导出数据.xlsx');
}
}
};
</script>处理复杂数据
若需导出带表头或合并单元格的复杂数据，可通过 xlsx 的 aoa_to_sheet 方法实现。
const complexData = [
['姓名', '年龄'], // 表头
['张三', 25],
['李四', 30]
];
const worksheet = XLSX.utils.aoa_to_sheet(complexData);注意事项
- 导入时需校验文件格式，避免非 Excel 文件。
- 导出大数据量时可能需分片处理，避免内存溢出。
- 浏览器兼容性问题可通过
FileSaver.js辅助解决（需单独安装）。
扩展功能
- 使用
vue-element-admin的Excel组件可快速集成。 - 服务端导出可通过后端生成文件流，前端调用下载接口。
