前端解析Excel文件

背景

用户上传excel文件需要在前端进行预览，在数据量不大，不影响性能体验的情况下，可以将excel解析放到前端进行操作，之后再将解析出来的数据传给后端

安装依赖 xlsx

npm i xlsx -S

关于xlsx的文档，可以查阅js-xlsx官方文档

组件中使用（以elementUI的el-upload作为上传组件）

<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>

备注： 如果excel解析数据量有可能会很大的情况下，如5万条以上，最好是交由后端解析excel，避免影响用户体验