vue导入excel文件并展示

要在Vue中导入Excel文件并展示，可以使用以下步骤：

1. 安装依赖

npm install xlsx file-saver --save

2. 创建一个input标签，允许用户选择Excel文件并触发事件：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

3. 在Vue组件中定义handleFileUpload方法，该方法将读取Excel文件并将其转换为JSON格式：

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      headers: [],
      rows: [],
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = e => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const headers = [];
        const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        for (const key in rows[0]) {
          headers.push(key);
        }
        this.headers = headers;
        this.rows = rows;
      };
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

4. 在组件中展示Excel数据。

以上代码将读取Excel文件并将其转换为JSON对象，该对象将包含表头和行数据。可以将表头和行数据分别存储在组件的数据属性中，并在模板中使用v-for指令将它们渲染到表格中。

注意：以上代码仅支持读取XLSX和XLS格式的Excel文件。如果需要支持其他格式，请参考XLSX.js文档。