使用使用vue如何读取excel表格数据

在 Vue.js 中实现读取 excel 表格数据可以使用第三方库，例如 xlsx、js-xlsx。首先需要安装第三方库，然后通过 JavaScript 读取文件中的内容，并使用第三方库将内容解析为 JSON 格式。最后，可以使用 Vue.js 实现数据绑定并将数据呈现在页面上。

以下是一个示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="readExcel"/>
    <table>
      <thead>
        <tr>
          <th v-for="th in excelData[0]">{{th}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in excelData" :key="index">
          <td v-for="td in row">{{td}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data () {
    return {
      excelData: []
    }
  },
  methods: {
    readExcel () {
      let file = this.$refs.fileInput.files[0]
      let reader = new FileReader()
      reader.onload = (e) => {
        let data = e.target.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let firstSheetName = workbook.SheetNames[0]
        let worksheet = workbook.Sheets[firstSheetName]
        this.excelData = XLSX.utils.sheet_to_json(worksheet)
      }
      reader.readAsBinaryString(file)
    }
  }
}
</script>