通过 xlsx 解析上传excel的数据

一、前言

在前端开发中，特别是在后台管理系统中，导入数据（上传excel）到后端是是否常见的功能；而一般的实现方式都是通过接口将excel上传到后端，再有后端进行数据解析并做后续操作。
今天，来记录一下前端通过 xlsx 直接解析得到数据。

二、安装依赖

npm i XLSX --save

三、上传文件解析数据

<template><div><!-- 不自动上传，不显示上传的列表，只能上传一个 --><el-uploadref="xlsxUploadRef"action="":show-file-list="false":auto-upload="false":on-change="onChange"accept=".xls,.xlsx":limit="1"><!-- 自定义按钮 --><slot></slot></el-upload></div>
</template><script>
import * as XLSX from 'xlsx'
export default {name: 'ResolveExcel',props: {fileType: { // 数据表类型type: Number,default: 1}},methods: {readFile(file) {return new Promise((resolve) => {const reader = new FileReader()reader.readAsBinaryString(file)reader.onload = (ev) => {resolve(ev.target.result)}})},async onChange(file) {// 格式检验if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {this.$modal.msgError('上传格式不正确，请上传xls或者xlsx格式')return false}const dataBinary = await this.readFile(file.raw)const workBook = XLSX.read(dataBinary, {type: 'binary',cellDates: true})const workSheet = workBook.Sheets[workBook.SheetNames[0]]const data = XLSX.utils.sheet_to_json(workSheet)console.log('XLSX数据', data) // excel 中没事数据是，data = []// 格式化数据， 并将数据回传；formatData 方法需要根据excel内的数据进行开发；此处并没有实现，实现开发中，该方法可能在父组件实现（多个地方使用，表格内容不一致，无法共用）const resultArr = this.formatData(data)this.$emit('getXlsxData', resultArr);this.$nextTick(() => { // 数据拿到后，清空上传列表，才能继续上传解析this.$refs.xlsxUploadRef.clearFiles();})}}
}
</script>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！