当前位置：首页 > VUE

vue实现前端实现导入导出

2026-01-14 00:56:33VUE

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');
}

文件下载通用方法

对于非表格数据的文件下载，可使用通用方法：

vue实现前端实现导入导出

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);
}