element excel导入数据，解析获取数据

前端导入excel表格，解析为json格式数据

npm install xlsx -g 全局安装xlsx
新建一个组件，随意命名，键入以下代码，复制即可用

<template>
  <span>
    <input class="input-file" type="file" @change="exportData"
           accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    <el-button type="success" size="small" @click="btnClick">{{title}}</el-button>
  </span>
</template>

<script>
  import XLSX from 'xlsx'

  export default {
    name: "inputExcel",
    data(){
      return{
        title:'导入表格'
      }
    },
    props: {
      type: String,
      default: "选择excel文件"
    },
    methods: {
      btnClick() {
        document.querySelector(".input-file").click();
      },
      exportData(event) {
        if(!event.currentTarget.files.length) {
          return;
        }
        const that = this;
        // 拿取文件对象
        let f = event.currentTarget.files[0];
        //这里已经拿到了excel的file文件，若是项目需求，可直接$emit丢出文件
        that.$emit('getMyExcelData',f);
        // 用FileReader来读取
        let reader = new FileReader();
        // 重写FileReader上的readAsBinaryString方法
        FileReader.prototype.readAsBinaryString = function(f) {
          let binary = "";
          let wb; // 读取完成的数据
          let outdata; // 你需要的数据
          let reader = new FileReader();
          reader.onload = function(e) {
            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            let bytes = new Uint8Array(reader.result);
            let length = bytes.byteLength;
            for (let i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            // 接下来就是xlsx
            wb = XLSX.read(binary, {
              type: "binary"
            });
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            // 导出格式为json，{表头：[]，表数据：[]}
            that.$emit("getResult", outdata);
          };
          reader.readAsArrayBuffer(f);
        };
        reader.readAsBinaryString(f);
      },
    }
  }
</script>

<style scoped>
  .input-file {
    display: none;
  }
</style>

父组件引入

import inputExcel from '../newText'

//注册组件
 components:{
      inputExcel
    },

组件使用

<input-excel @getResult="getMyExcelData"></input-excel>

获取数据方法
我这里因为项目需求的原因，使用的是file文件，如过需要解析后的数据，自行更改接收事件就行

getMyExcelData(data){
        console.log(data);
      }