高效解析：Vue项目如何实现Excel的导入导出？

2024-02-01 17:49:14

安装必要包

首先，我们需要安装必要的包。以下是在Vue项目中使用Excel导入导出的包：

npm install vue-table-excelexport vue-xlsx --save

使用组件

接下来，需要在Vue项目中使用组件。本文推荐使用vue-table-excelexport和vue-xlsx这两个组件，它们可以帮助您轻松实现Excel导入导出功能。

import { Exporter } from 'vue-table-excelexport';
import { parse } from 'vue-xlsx';

封装组件

export default {
  components: {
    Exporter
  },
  data() {
    return {
      tableData: [
        {
          name: 'John Doe',
          age: 30
        },
        {
          name: 'Jane Doe',
          age: 25
        }
      ]
    }
  },
  methods: {
    exportExcel() {
      const exporter = new Exporter(this.$refs.table);
      exporter.export('table-data.xlsx');
    },
    async importExcel(e) {
      const files = e.target.files;
      if (files.length > 0) {
        const data = await parse(files[0]);
        this.tableData = data;
      }
    }
  }
}

代码示例

<template>
  <div>
    <table ref="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出Excel</button>
    <input type="file" @change="importExcel">
  </div>
</template>

<script>
import { Exporter } from 'vue-table-excelexport';
import { parse } from 'vue-xlsx';

export default {
  components: {
    Exporter
  },
  data() {
    return {
      tableData: [
        {
          name: 'John Doe',
          age: 30
        },
        {
          name: 'Jane Doe',
          age: 25
        }
      ]
    }
  },
  methods: {
    exportExcel() {
      const exporter = new Exporter(this.$refs.table);
      exporter.export('table-data.xlsx');
    },
    async importExcel(e) {
      const files = e.target.files;
      if (files.length > 0) {
        const data = await parse(files[0]);
        this.tableData = data;
      }
    }
  }
}
</script>