Vue项目中导入excel文件读取成js数组

<template>

  <span>

    <input class="input-file" type="file" @change="exportData" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>

    <button @click="btnClick">导入EXCEL</button>

  </span>

</template>

<script>

import XLSX from 'xlsx'

export default {

  name: 'HelloWorld',

  props: {

    type: String,

    default: '选择excel文件'

  },

  methods: {

    btnClick () {

      document.querySelector('.input-file').click()

    },

    exportData (event) {

      if (!event.currentTarget.files.length) {

        return

      }

      const that = this

      // 拿取文件对象

      var f = event.currentTarget.files[0]

      // 用 FileReader 来读取

      var reader = new FileReader()

      // 重写 FileReader 上的 readAsBinaryString 方法

     FileReader.prototype.readAsBinaryString = function (f) {

        var binary = ''

        var wb // 读取完成的数据

        var outdata // 你需要的数据

        var reader = new FileReader()

        reader.onload = function (e) {

          // 读取成 Uint8Array，再转换为 Unicode 编码（Unicode 占两个字节）

          var bytes = new Uint8Array(reader.result)

          var length = bytes.byteLength

          for (var i = 0; i < length; i++) {

            binary += String.fromCharCode(bytes[i])

          }

          // 接下来就是 xlsx 了，具体可看 api

          wb = XLSX.read(binary, {

            type: 'binary'

          })

          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])

          // 自定义方法向父组件传递数据

          console.log('outdata = ' + JSON.stringify(outdata))

          that.$emit('getResult', outdata)

        }

        reader.readAsArrayBuffer(f)

      }

      reader.readAsBinaryString(f)

    }

  }

}

</script>

<style scoped>

  .input-file {

    display: none;

  }

</style>