平时项目中对于Excel的导入解析是很常见的功能，一般都是放在后端执行；但是也有特殊的情况，偶尔也有要求说前端执行解析，判空，校验等，最后组装成后端接口想要的数据结构。

前端如何解释Excel呢

因为我使用插件执行的 you know

• 安装插件

npm install xlsx@0.14.1   // 0.14.1 是我使用的版本

• 还有个nanoid

npm i nanoid 

此处我没有使用安装的这个 而是使用 自定的代码如下：

// index.js
const createId =  () => {return (Number(Math.random().toString().substr(2, 7) + Date.now()).toString(36) +Date.now())
}
export {createId as default,createId
}

• 安装已经完成了 当然 依然 you know

import XLSX from 'xlsx'
import nanoid from 'xxxx/xxx/index'

• 报一丝 差点忘记了 template

<el-upload class="upload" action="" :auto-upload="false" :show-file-list="false" :multiple="false" :on-change="(file, fileList) => importTemp(file, fileList)"><el-button v-permission="'are you ok'" type="primary" size="small" plain class="flex" >you know the name of the custom button</el-button></el-upload>

• finally

methods: {importTemp(file, fileList) {const fileReader = new FileReader()fileReader.onload = ev => {try {const data = ev.target.resultconst workbook = XLSX.read(data, {type: 'binary'})const sheet = Object.keys(workbook.Sheets)[1] // 我是用的是第二个const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) // const worksheet = workbook.Sheets[sheet]const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })if (!jsonData.length) returnconst headers = jsonData[0]if (!headers.length) returnconst colorParam = headers.find(i => /xxx/.test(i))const transtypeParam = headers.find(i => /xxx/.test(i))const operationTypeParam = headers.find(i => /xxx/.test(i))const systemCodeParam = headers.find(i => /xxx/.test(i))const platCodeParam = headers.find(i => /xxx/.test(i))const truckingBillNoParam = headers.find(i => /xxx/.test(i))const delivyPlanTypeParam = headers.find(i => /xxx/.test(i))const targetObj = {}const nameMap = { // 定义必填的字段systemCode: systemCodeParam,platCode: platCodeParam,operationType: operationTypeParam,truckingBillNo: truckingBillNoParam,transType: transtypeParam,vehicleNumber: '车牌号',carColor: colorParam,driverName: '司机姓名',idcard: '司机身份证号',driverPhone: '司机手机号',clientCompanyCode: 'xxx',clientCompanyName: 'xxx名称',// messageBatchNo: 'xxx批次号',// detailsCounts: '明细条数',billId: 'xxx',billDependId: 'xxx',factoryBillId: 'xxx',delivyPlanType: delivyPlanTypeParam}for (let [idx, el] of json.entries()) {let tempObj = {}for (const key of Object.keys(nameMap)) {const value = el[nameMap[key]]if (!value && value !== 0) {this.$message.warning(`第${idx + 2}行，字段: ${nameMap[key]} 为必填值`)return}tempObj[key] = value}tempObj = {...tempObj,queueId: el['车辆排队号']}if (targetObj[tempObj.truckingBillNo]) {targetObj[tempObj.truckingBillNo].push(tempObj)} else {targetObj[tempObj.truckingBillNo] = [tempObj]}}const targetList = Object.keys(targetObj).map((key, i) => {const mainitem = targetObj[key][0]const target = {}Object.keys(mainitem).map(key => {if (!['qqq', 'xxxx', 'ssss', 'wwww'].includes(key)) {const val = (mainitem[key] + '').replace(/\s/gi, '')target[key] = ['null', 'undefined'].includes(val) ? '' : val // 判空下}})target.details = targetObj[key].map(item => {return {billId: item.qqq,billDependId: item.xxxx,factoryBillId: item.ssss,delivyPlanType: item.wwww}})target.detailsCounts = target.details.lengthtarget.messageBatchNo = nanoid() + ireturn target})// 后台请求接口import({ // 你自己的哦importDataList: targetList}).then(res => {const { msg, status } = resif (status) {this.$message.success('发送成功')} else {this.$message.error(msg ?? '操作失败')}})} catch (e) {console.log(e, 'error')}}fileReader.readAsBinaryString(file.raw)}
}

• catch
  
  双人行也有我师焉：哎呦不错哦