vue xlsx

// 使用 vue 和 xlsx 库来读取和处理 Excel 文件的示例代码

// 首先需要安装 xlsx 库
// npm install xlsx

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="readExcel">读取 Excel</button>
    <div v-if="data">
      <table border="1">
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      file: null,
      data: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    readExcel() {
      if (this.file) {
        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];
          this.data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        };
        reader.readAsArrayBuffer(this.file);
      }
    }
  }
};
</script>

<style scoped>
table {
  margin-top: 20px;
  width: 100%;
}
td {
  padding: 5px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个文件输入框 (<input type="file" />) 和一个按钮 (<button>)，用于选择 Excel 文件并触发读取操作。
   • 使用 v-if 来控制表格的显示，只有在成功读取 Excel 文件后才会显示表格内容。

2. 脚本部分 (<script>):

   • 导入了 xlsx 库，并定义了一个 Vue 组件。
   • data 中包含两个属性：file 用于存储用户选择的文件，data 用于存储解析后的 Excel 数据。
   • handleFileUpload 方法用于处理文件选择事件，并将选中的文件保存到 file 属性中。
   • readExcel 方法使用 FileReader 读取文件内容，并通过 xlsx 库解析为 JSON 格式的数据。解析后的数据会赋值给 data 属性，以便在模板中渲染。

3. 样式部分 (<style scoped>):

   • 简单设置了表格和单元格的样式，使表格看起来更整洁。

通过这个示例代码，你可以实现从用户上传的 Excel 文件中读取数据并在页面上显示的功能。