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

<script>
import { read, utils } from 'xlsx';

export default {
  data() {
    return {
      headers: [],
      rows: [],
    };
  },
  methods: {
	// 選擇文件
    handleFileSelect(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      // 處理文件內(nèi)容
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = read(data, { type: 'array' });

        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = utils.sheet_to_json(worksheet, { header: 1 });
		
		// 提前文件內(nèi)容
        this.headers = jsonData[0];
        this.rows = jsonData.slice(1).map((row, index) => ({
          index: index + 1,
          cells: row.map((cell, column) => ({
            column: column + 1,
            value: cell,
          })),
        }));
      };
	  // 讀取文件內(nèi)容
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

<template>
  <div>
    <form @submit.prevent="saveExcel">
      <label for="name">姓名:</label>
      <input type="text" id="name" v-model="name" required>
      <br>
      <label for="sex">性別:</label>
      <input type="text" id="sex" v-model="sex" required>
      <br>
      <label for="age">年齡:</label>
      <input type="number" id="age" v-model="age" required>
      <br>
      <label for="dept">職位:</label>
      <input type="text" id="dept" v-model="dept" required>
      <br>
      <button type="submit">Save to Excel</button>
    </form>
  </div>
</template>

<script>
import { utils, writeFile } from 'xlsx';

export default {
  data() {
    return {
      name: '',
      age: null,
      sex: '',
      dept: '',
    };
  },
  methods: {
	// 保存excel
    saveExcel() {
      let data = []
      data.push(['姓名', '性別', '年齡', '職位'])
      data.push([this.name, this.sex, this.age, this.dept])
      // for (let i=0; i<10; i++) {
      //   data.push([(i + 1) + '', '學(xué)校A'])
      // }
      let WorkSheet = utils.aoa_to_sheet(data)
      let new_workbook = utils.book_new()
      utils.book_append_sheet(new_workbook, WorkSheet, '測(cè)試數(shù)據(jù)')
      writeFile(new_workbook, `測(cè)試數(shù)據(jù).xlsx`)
    },
  },
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
}
input {
  margin-bottom: 10px;
}
button {
  margin-top: 10px;
}
</style>