TypeScript-Vue3如何点击按钮上传Excel表格，并把Excel表格中的数据读取到一个数组

在TypeScript-Vue3中，我们可以使用第三方库xlsx来处理Excel文件。以下是一个示例，展示了如何点击按钮上传Excel表格，并将Excel表格中的数据读取到一个数组中。

安装依赖

首先，需要安装xlsx库。在命令行中执行以下命令：

npm install xlsx --save

创建按钮和文件选择器

在Vue模板中，创建一个按钮和一个文件选择器，用于上传Excel表格文件。例如：

<template>
  <div>
    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
    <button @click="openFilePicker">选择Excel文件</button>
  </div>
</template>

处理文件选择

在Vue组件的方法中，实现打开文件选择器并处理文件选择事件的逻辑。首先，在Vue实例中创建一个数组，用于存储Excel表格中的数据。然后，创建一个方法openFilePicker，用于触发文件选择器的点击事件。并且，创建一个方法handleFileChange，用于处理文件选择事件。

<script lang="ts">
import { defineComponent } from 'vue';
import * as XLSX from 'xlsx';

export default defineComponent({
  data() {
    return {
      excelData: [] as any[] // 用于存储Excel表格中的数据
    };
  },
  methods: {
    openFilePicker() {
      // 触发文件选择器的点击事件
      this.$refs.fileInput.click();
    },
    handleFileChange(event: Event) {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          const data = new Uint8Array(e.target?.result as ArrayBuffer);
          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表格中的数据存储到数组中
          this.excelData = jsonData;
        };

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

显示Excel表格中的数据

在Vue模板中，使用v-for指令将数组中的数据渲染到页面上。例如：

<template>
  <div>
    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
    <button @click="openFilePicker">选择Excel文件</button>

    <table>
      <thead>
        <tr>
          <th v-for="header in excelData[0]" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in excelData" :key="index">
          <td v-for="cell in row" :key="cell">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

完整代码

下面是完整的示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
    <button @click="openFilePicker">选择Excel文件</button>

    <table>
      <thead>
        <tr>
          <th v-for="header in excelData[0]" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in excelData" :key="index">
          <td v-for="cell in row" :key="cell">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as XLSX from 'xlsx';

export default defineComponent({
  data() {
    return {
      excelData: [] as any[] // 用于存储Excel表格中的数据
    };
  },
  methods: {
    openFilePicker() {
      // 触发文件选择器的点击事件
      this.$refs.fileInput.click();
    },
    handleFileChange(event: Event) {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          const data = new Uint8Array(e.target?.result as ArrayBuffer);
          const