vue实现前端实现导入导出
Vue 前端导入导出实现方法
Excel 导入
使用 xlsx 库解析 Excel 文件，结合 element-ui 上传组件实现导入功能。
安装依赖：
npm install xlsx @element-plus/icons-vue模板部分：
<el-upload
action=""
:auto-upload="false"
:on-change="handleFileChange"
accept=".xlsx, .xls"
>
<el-button type="primary">选择Excel文件</el-button>
</el-upload>方法实现：
import * as XLSX from 'xlsx';
methods: {
handleFileChange(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.raw);
}
}Excel 导出
使用 xlsx 和 file-saver 实现表格数据导出为 Excel 文件。
安装依赖：
npm install file-saver方法实现：
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
methods: {
exportToExcel() {
const data = [
['姓名', '年龄', '性别'],
['张三', 25, '男'],
['李四', 30, '女']
];
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, '导出数据.xlsx');
}
}CSV 导入导出
CSV 处理更轻量，适合简单数据场景。
CSV 导入：
handleCSVImport(file) {
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
const lines = content.split('\n');
const result = lines.map(line => line.split(','));
console.log('CSV数据:', result);
};
reader.readAsText(file.raw);
}CSV 导出：
exportToCSV() {
const data = [
['姓名', '年龄', '性别'],
['张三', '25', '男'],
['李四', '30', '女']
];
const csvContent = data.map(row => row.join(',')).join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
saveAs(blob, '导出数据.csv');
}文件下载通用方法
对于非表格数据的文件下载，可使用通用方法：
downloadFile(url, fileName) {
const a = document.createElement('a');
a.href = url;
a.download = fileName || 'download';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}注意事项
- 大文件处理应考虑分片读取或使用 Web Worker 防止界面卡顿
- 导出数据量较大时建议使用服务端导出
- 导入数据应做好格式校验和异常处理
- 浏览器兼容性需要注意 IE 等老旧浏览器的处理方式不同
