vue实现文件导入导出
Vue 文件导入
在 Vue 中实现文件导入通常通过 <input type="file"> 元素结合 FileReader API 完成。
<template>
<input type="file" @change="handleFileImport" />
</template>
<script>
export default {
methods: {
handleFileImport(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
console.log(content); // 处理文件内容
};
reader.readAsText(file); // 或 readAsDataURL/file.readAsArrayBuffer 等
}
}
};
</script>Vue 文件导出
文件导出可通过创建 Blob 对象和动态生成下载链接实现。
export default {
methods: {
exportToFile(content, fileName, type = 'text/plain') {
const blob = new Blob([content], { type });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url); // 释放内存
}
}
}Excel 文件处理
使用库如 xlsx 处理 Excel 文件更高效：
npm install xlsx导入 Excel:
import * as XLSX from 'xlsx';
handleExcelImport(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 firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(firstSheet);
console.log(jsonData);
};
reader.readAsArrayBuffer(file);
}导出 Excel:
exportExcel() {
const data = [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }];
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, "export.xlsx");
}CSV 文件处理
导出 CSV:
exportCSV() {
const headers = ['Name,Age'];
const data = ['Alice,25', 'Bob,30'];
const csvContent = [...headers, ...data].join('\n');
this.exportToFile(csvContent, 'data.csv');
}注意事项
- 文件导入时需验证文件类型和大小
- 大文件建议使用分块读取
- 导出大量数据时考虑使用 Web Worker 避免界面卡顿
- 移动端需测试兼容性
