当前位置：首页 > VUE

前端vue实现导入导出

2026-02-22 06:26:09VUE

Vue 实现 Excel 导入功能

使用 xlsx 库解析 Excel 文件安装依赖包：npm install xlsx

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

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    handleImport(e) {
      const files = e.target.files;
      if (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);

        console.log(jsonData); // 处理导入数据
      };

      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

Vue 实现 Excel 导出功能

使用 xlsx 和 file-saver 库安装依赖：npm install xlsx file-saver

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 25, '男'],
        ['李四', 30, '女']
      ];

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

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

      const blob = new Blob([excelBuffer], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      });

      saveAs(blob, '导出数据.xlsx');
    }
  }
};

使用 Element UI 上传组件实现导入

<template>
  <el-upload
    action=""
    :auto-upload="false"
    :on-change="handleImport"
    accept=".xlsx, .xls">
    <el-button type="primary">导入Excel</el-button>
  </el-upload>
</template>

处理复杂数据结构导出

exportComplexData() {
  const headers = ['ID', 'Name', 'Address'];
  const body = this.tableData.map(item => [
    item.id,
    item.name,
    item.address.city + ' ' + item.address.street
  ]);

  const data = [headers, ...body];
  const worksheet = XLSX.utils.aoa_to_sheet(data);
  // 其余导出代码同上
}