vue项目使用xlsx.js解析excel表格数据

  <div class="import-excel">
    <el-upload
      action
      accept=".xlsx, .xls"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handle"
    >
      <slot></slot>
    </el-upload>
  </div>
</template>

<script>
  import * as XLSX from 'xlsx/xlsx.mjs'
  export default {
    data() {
      return {}
    },
    methods: {
      readFile(file) {
        //文件读取
        return new Promise((resolve) => {
          let reader = new FileReader()
          reader.readAsBinaryString(file) //以二进制的方式读取
          reader.onload = (ev) => {
            resolve(ev.target.result)
          }
        })
      },
      async handle(ev) {
        let result = {}
        let file = ev.raw
        if (!file) {
          console.log('文件打开失败')
          return
        } else {
          let data = await this.readFile(file)
          let workbook = XLSX.read(data, { type: 'binary' }) //解析二进制格式数据
          for (let key in workbook.Sheets) {
            const worksheet = workbook.Sheets[key]
            const excelJsonData = XLSX.utils.sheet_to_json(worksheet)
            result[key] = excelJsonData
          }
        }
       this.$emit('backExcelData',result)
      },
    },
  }
</script>

<style></style>