vue2.x + element2 导入导出excel

要在Vue 2.x中使用Element UI来导入和导出Excel，你需要安装element-ui和file-saver插件。

首先，在Vue项目中使用npm或yarn安装Element UI和file-saver插件：

npm install element-ui file-saver --save

然后，在Vue组件中引入所需的文件：

import { Button, Table } from 'element-ui'
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

在组件中，你需要定义导入和导出Excel的方法。下面是一个简单的示例：

methods: {
  // 导入Excel
  handleImportExcel(file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' })
      const worksheet = workbook.Sheets[workbook.SheetNames[0]]
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
      // 处理导入的Excel数据
      console.log(jsonData)
    }
    reader.readAsArrayBuffer(file.raw)
  },
  // 导出Excel
  handleExportExcel() {
    const jsonData = [
      ['姓名', '年龄', '性别'],
      ['张三', 18, '男'],
      ['李四', 20, '女']
    ]
    const worksheet = XLSX.utils.aoa_to_sheet(jsonData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
    const excelData = new Blob([excelBuffer], { type: 'application/octet-stream' })
    FileSaver.saveAs(excelData, 'example.xlsx')
  }
}

最后，在模板中使用Element UI的Button和Table组件，分别绑定导入和导出Excel的方法：

<template>
  <div>
    <el-button type="primary" @change="handleImportExcel">导入Excel</el-button>
    <el-table :data="tableData">
      <!-- 表格内容 -->
    </el-table>
    <el-button type="success" @click="handleExportExcel">导出Excel</el-button>
  </div>
</template>

这样，你就可以在Vue项目中使用Element UI来导入和导出Excel了。当用户选择一个Excel文件时，`handleImportExcel`方法将会被触发，并将Excel数据转换为JSON数据进行处理。而`handleExportExcel`方法则会将JSON数据转换为Excel文件并进行下载。