使用vue.js从xlsx文件中仅获取列数据

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <ul>
      <li v-for="item in columnData" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      columnData: [],
    };
  },
  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 worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 获取第一列数据
        const columnData = jsonData.map((row) => row[0]);

        this.columnData = columnData;
      };

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