一、前言

在前端開發中，特別是在后臺管理系統中，導入數據（上傳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>

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！