npm install xlsx -S

import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";

<template>
  <div>
    <input type="file" @change="uploadFile">
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, idx) in row" :key="idx">{{ cell }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";
export default {
  components: {
    VueXlsx,
  },
  data() {
    return {
      rows: [],
      columns: [],
    };
  },
  methods: {
    uploadFile(event) {
      const input = event.target;
      const reader = new FileReader();
      reader.onload = async () => {
        const data = reader.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        this.rows = json;
      };
      reader.readAsBinaryString(input.files[0]);
    },
  },
};
</script>

pnpm install xlsx
pnpm install xlsx-style-hzx //設(shè)置邊框與格式用

 <div @click="exportExcel" style="width:40px;height:40px;position: absolute;z-index: 90000;background-color: red;">導(dǎo)出</div>

import XLSX from 'xlsx'
// 導(dǎo)入Excel
function importSchools(fileInput) {
  schools = []
  var files = fileInput.files;
  var fileReader = new FileReader();
  fileReader.onload = function (ev) {
    try {
      var data = ev.target.result
      var workbook = XLSX.read(data, {
        type: 'binary'
      }) // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象
    } catch (e) {
      console.log('文件類型不正確');
      return;
    }
    // 表格的表格范圍，可用于判斷表頭是否數(shù)量是否正確
    var fromTo = '';
    // 遍歷每張表讀取
    for (var sheet in workbook.Sheets) {
      if (workbook.Sheets.hasOwnProperty(sheet)) {
        fromTo = workbook.Sheets[sheet]['!ref'];
        var rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
        console.log('rows', rows)
        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          if (i === 0) {
            const title = row['界面標(biāo)題']
            if (title) {
              document.getElementById('title').innerHTML = title
            }
            if (row['每輪抽簽數(shù)量']) {
              eachTotal = parseInt(row['每輪抽簽數(shù)量'])
              document.getElementById('eachTotal').value = eachTotal
            }
          }
          var name = row['學(xué)校名稱'];
          console.log('學(xué)校名稱:', name);
          schools.push({ number: (i+1), text: name})
        }
        if (schools.length) {
          document.getElementById('schoolsContainer').innerHTML = ''
          pushRecords(schools)
        }
        // console.log('schools', schools.value)
        break; // 如果只取第一張表，就取消注釋這行
      }
    }
    // 清空input file的值，確保下次再次觸發(fā)change事件
    fileInput.value = ''
  };
  // 以二進(jìn)制方式打開文件
  fileReader.readAsBinaryString(files[0]);
}
// 導(dǎo)出Excel
function exportExcel() {
  console.log('XLSX', XLSX)
  let data = []
  data.push(['抽簽號(hào)', '學(xué)校名稱'])
  for (let i=0; i<10; i++) {
    data.push([(i + 1) + '', '學(xué)校A'])
  }
  let WorkSheet = XLSX.utils.aoa_to_sheet(data)
  // eslint-disable-next-line camelcase
  let new_workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '抽簽結(jié)果')
  XLSX.writeFile(new_workbook, `抽簽結(jié)果.xlsx`)
}