引入方式：

CDN:

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

NPM:

npm install xlsx

vue 使用樣例

將文件上傳與將Excel數(shù)據(jù)轉(zhuǎn)換為對(duì)象數(shù)組配合使用，可以實(shí)現(xiàn)在前端上傳Excel文件并將數(shù)據(jù)顯示在頁面上的功能。

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" />
    <table>
      <thead>
        <tr>
          <th v-for="header in headers">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="cell in row">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      headers: [],
      rows: []
    };
  },
  methods: {
    onFileChange(e) {
      // 獲取上傳的文件
      const file = e.target.files[0];

      // 讀取Excel文件
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 獲取第一個(gè)工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 將Excel數(shù)據(jù)轉(zhuǎn)換成對(duì)象數(shù)組
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 設(shè)置表頭和數(shù)據(jù)
        this.headers = jsonData[0];
        this.rows = jsonData.slice(1);
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>