vue实现表格导入

Vue 实现表格导入的方法

使用 Element UI 的 Upload 组件

安装 Element UI 依赖后，可以使用其 Upload 组件实现文件上传功能。配置 action 属性为后端接口地址，设置 accept 属性限制文件类型为 .xlsx 或 .csv。

<el-upload
  class="upload-demo"
  action="/api/upload"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  accept=".xlsx, .csv"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

methods: {
  beforeUpload(file) {
    const isExcel = file.type.includes('excel') || file.type.includes('sheet');
    if (!isExcel) {
      this.$message.error('只能上传 Excel 文件');
      return false;
    }
    return true;
  },
  handleSuccess(response) {
    this.$message.success('上传成功');
    // 处理返回的数据
  }
}

使用 xlsx 库解析 Excel 文件

安装 xlsx 库后，可以通过前端解析上传的 Excel 文件，获取表格数据。

import XLSX from 'xlsx';

methods: {
  handleFileUpload(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);
      this.tableData = jsonData;
    };
    reader.readAsArrayBuffer(file);
  }
}

使用 vue-json-excel 导出数据

如果需要将数据导出为 Excel 文件，可以安装 vue-json-excel 组件。

<download-excel
  :data="tableData"
  :fields="jsonFields"
  name="filename.xls"
>
  <el-button type="success">导出 Excel</el-button>
</download-excel>

data() {
  return {
    jsonFields: {
      'ID': 'id',
      'Name': 'name',
      'Age': 'age'
    },
    tableData: []
  };
}

后端接口处理

后端接口需要接收前端上传的文件，解析后返回处理结果。以 Node.js 为例：

const express = require('express');
const multer = require('multer');
const XLSX = require('xlsx');

const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/api/upload', upload.single('file'), (req, res) => {
  const workbook = XLSX.readFile(req.file.path);
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const data = XLSX.utils.sheet_to_json(sheet);
  res.json({ data });
});

app.listen(3000);

完整示例代码

结合上述方法，完整的 Vue 组件代码如下：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .csv" />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    handleFileUpload(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);
        this.tableData = jsonData;
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

通过以上方法，可以实现 Vue 中表格数据的导入和导出功能。