Excel表导入到前端解析并展示-扫盲贴

2023-01-09 11:58:46

利用Vue轻松导入Excel数据，提升效率

在繁忙的工作环境中，我们常常需要处理海量的Excel表格，从中提取数据并导入到数据库或其他系统中。过去，这项任务只能通过繁琐的手动输入来完成，既费时又易出错。然而，借助Vue.js这一强大的前端框架，我们能够打造高效的Excel数据导入工具，显著提升工作效率和准确性。

准备工作：

为了开启我们的Excel数据导入之旅，我们需要做好以下准备：

Vue.js框架： 这是一个流行的前端框架，用于构建交互式和动态的web应用程序。
Excel表格文件： 包含需要导入的数据的Excel表格。
后端服务器（可选）： 用于处理数据处理请求并存储导入的数据。

步骤详解：

1. 创建Vue项目

首先，使用Vue CLI快速创建一个新的Vue项目：

vue create excel-import-app

2. 安装依赖

接下来，我们需要安装vue-table-component依赖：

npm install vue-table-component

3. 配置Vue项目

在main.js文件中，对Vue项目进行如下配置：

import Vue from 'vue'
import App from './App.vue'
import VueTable from 'vue-table-component'

Vue.use(VueTable)

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 创建Excel导入组件

接下来，我们创建Excel导入组件：

<template>
  <div>
    <input type="file" @change="handleFileSelect" />
    <table v-if="data" class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data" :key="row.id">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Vue from 'vue'
import VueTable from 'vue-table-component'

export default {
  name: 'ExcelImport',
  components: {
    VueTable,
  },
  data() {
    return {
      data: null,
    }
  },
  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = e.target.result
        this.parseData(data)
      }
      reader.readAsArrayBuffer(file)
    },
    parseData(data) {
      const workbook = XLSX.read(data, { type: 'array' })
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]
      this.data = XLSX.utils.sheet_to_json(worksheet)
    },
  },
}
</script>

5. 使用Excel导入组件

最后，在App.vue文件中使用Excel导入组件：

<template>
  <div>
    <h1>Excel导入</h1>
    <excel-import />
  </div>
</template>

<script>
import ExcelImport from './components/ExcelImport.vue'

export default {
  name: 'App',
  components: {
    ExcelImport,
  },
}
</script>