vue中XLSX解析excel文件

引入XLSX

import XLSX from 'xlsx'
import Vue from 'vue'
const vm = new Vue();

async function readExcel (file) {
  const types = file.name.split('.');
  const type = types[types.length - 1];
  const fileType = [
    'xlsx', 'xls', 'XLSX', 'XLS'
  ].some(item => item == type);
  if (!fileType) {
    vm.$message.error('格式错误！请重新选择')
    return
  }
    
  const result = [];
  
   const loaded =  (row) => {
    return new Promise((resolve) =>{
      const reader = new FileReader();
      reader.onload = function(e) {
        const data = e.target.result;
        const wb = XLSX.read(data, {
          type: 'binary'
        });
        
        wb.SheetNames.forEach((sheetName) => {
          result.push(
            XLSX.utils.sheet_to_json(wb.Sheets[sheetName], {header:1,defval:''})
            /* {
            sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName], {header:1,defval:''})
            } */
          )
        });
        resolve(true)
      };
      reader.readAsBinaryString(row)
    })
  }

  await loaded(file.raw)
  return result;
}

export { readExcel }

使用

<el-upload ref="upload" accept=".xls,.xlsx" action="" :auto-upload="false" :on-change="handleUpload" :show-file-list="false">
                        <el-button type="primary" plain>选择文件</el-button>
                        <span>只能上传xls或xlsx文件</span>
                        <span>{{form.fileName}}</span>
                    </el-upload>


handleUpload (file,fileList) {
    // readExcel(file)
    if(fileList && fileList.length) {
        this.ruleForm.fileText = [];
        this.ruleForm.fileName = fileList[fileList.length - 1].name;
        readExcel(file).then((res) =>{
            if (res) {
                 const obj = res[0];  
                 for(let i = 0; i < obj.length; i ++) {
                 　　const arr = {}
                 　　arr.itemIds = obj[i][0];
                 　　arr.subThemeTitle = obj[i][1];
                 　　this.ruleForm.fileText.push(arr);
             　　}
         　　}
       })
    }
,