前端解析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,避免影响用户体验