背景
用户上传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，避免影响用户体验
