当前位置：首页 > VUE

前端vue实现导入导出

2026-01-21 15:03:54VUE

Vue 实现 Excel 导入功能

安装依赖库 xlsx 和 file-saver：

npm install xlsx file-saver --save

创建导入组件模板：

<input type="file" @change="handleFileChange" accept=".xlsx, .xls" />

实现导入逻辑：

import * as XLSX from 'xlsx';

methods: {
  handleFileChange(e) {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    const file = 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);

      // 处理导入数据
      this.processImportData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  },

  processImportData(data) {
    // 数据转换和处理逻辑
    console.log('导入数据:', data);
  }
}

Vue 实现 Excel 导出功能

创建导出方法：

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

methods: {
  exportToExcel() {
    const data = this.exportData; // 要导出的数据

    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    const excelBuffer = XLSX.write(workbook, {
      bookType: 'xlsx',
      type: 'array'
    });

    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    FileSaver.saveAs(blob, 'export.xlsx');
  }
}

高级功能实现

自定义表头映射：

const headerMap = {
  id: 'ID',
  name: '姓名',
  age: '年龄'
};

function mapHeaders(data) {
  return data.map(item => {
    const newItem = {};
    Object.keys(headerMap).forEach(key => {
      newItem[headerMap[key]] = item[key];
    });
    return newItem;
  });
}

大数据量分片处理：

function chunkExport(data, chunkSize = 10000) {
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    this.exportChunk(chunk, i/chunkSize + 1);
  }
}

常见问题解决方案

处理日期格式：

function formatDate(cell) {
  if (cell.t === 'n' && cell.v < 1) {
    return XLSX.SSF.format('yyyy-mm-dd', cell.v);
  }
  return cell.w;
}

中文乱码处理：

const blob = new Blob(
  [String.fromCharCode(0xFEFF), excelBuffer],
  { type: 'application/vnd.ms-excel;charset=utf-8' }
);

性能优化建议

使用 Web Worker 处理大数据：

// worker.js
self.importScripts('https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js');

self.onmessage = function(e) {
  const data = e.data;
  const worksheet = XLSX.utils.json_to_sheet(data);
  postMessage(worksheet);
};

前端分页导出：

前端vue实现导入导出

function paginatedExport(data, pageSize = 5000) {
  const pages = Math.ceil(data.length / pageSize);

  for (let page = 1; page <= pages; page++) {
    const chunk = data.slice((page-1)*pageSize, page*pageSize);
    this.exportToExcel(chunk, `data_page_${page}.xlsx`);
  }
}

标签: vue