vue读取excel表格内容

在Vue中读取Excel表格内容，可以使用第三方库xlsx。以下是一个简单的例子：

1. 首先，安装xlsx库：

npm install xlsx

2. 然后，在Vue组件中使用xlsx读取Excel文件：

<template>
  <div>
    <input type="file" @change="readExcel" />
    <div v-if="excelData">
      <table>
        <tr v-for="(row, rowIndex) in excelData" :key="`row-${rowIndex}`">
          <td v-for="(cell, cellIndex) in row" :key="`cell-${cellIndex}`">{{ cell }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
 
<script>
import * as XLSX from 'xlsx';
 
export default {
  data() {
    return {
      excelData: null
    };
  },
  methods: {
    readExcel(event) {
      const files = event.target.files;
      if (files && files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = e => {
          const bufferArray = e.target.result;
          const wb = XLSX.read(bufferArray, { type: 'buffer' });
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          this.excelData = XLSX.utils.sheet_to_json(ws, { header: 1 });
        };
        fileReader.readAsArrayBuffer(files[0]);
      }
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，其中包含一个文件输入元素。当用户选择一个Excel文件后，我们使用FileReader读取文件内容，然后使用xlsx库解析Excel文件并将第一个工作表转换为JSON。最后，我们将解析后的数据存储在组件的excelData数据属性中，并在模板中遍历展示。