前端解析Excel文件

npm i xlsx -S

<template>
  <div class="action">
    <el-upload
      action="/example/upload"
      ref="upload"
      :show-file-list="false"
      :on-change="readExcel"
      :auto-upload="false"
    >
    <el-button type="primary" class="btn-color">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import XLSX from 'xlsx';
@Component({
  components: {
  },
})
export default class ComponentName extends Vue {
  // 使用xlsx插件解析excel
  private readExcel(file: any) {
    const fileReader = new FileReader();
    fileReader.onload = (event: any) => {
      try {
        const data = event.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        for (const sheet of Object.keys(workbook.Sheets)) {
          const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
          this.handlePreview(sheetArray);
        }
      } catch (err) {
        console.log(err);
        return false;
      }
    };
    fileReader.readAsBinaryString(file.raw); // 必须调用
  }
  // 处理数据
  private handlePreview(originRows: any[]) {
    // 根据业务需求处理和筛选数据
    const rows = originRows.filter((item) => {
      if (item.序号) {
        return item.序号.toString().indexOf('1（示例）') === -1;
      }
      return item;
    });
    if (rows.length === 0) {
      console.log('导入数据至少一行！');
      return Promise.resolve();
    }
    console.log('解析并处理过后的excel数据', rows);
    return Promise.resolve();
  }  
}
</script>
<style lang='scss' scoped>
</style>