前端上传Excel，解析并渲染到表格中(前端实现)

用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑

1.安装xlsx,在终端运行以下命令

npm install xlsx

2.在需要使用的页面引入xlsx

import * as xlsx from 'xlsx'

3.编写上传组件，这里是element-UI

<el-upload
                            ref="waterUploadRef"
                            action=""
                            :http-request="httpExcelRequest"
                            :limit="1"
                            :show-file-list="false"
                            class="uploadExcelContent"
                            :data="{}"
                        >
                            <div title="导入excel" style="cursor: pointer">
                                <div>导入excel</div>
                            </div>
                        </el-upload>



涉及到动态设置ref的原因：

一是由于upload组件在设置了 :limit="1"，在上传第一个文件之后，浏览器会保存着我们已经上传的文件，导致我们继续上传文件的时候，页面没有反应；解决该问题需要在on-success钩子函数中通过ref来清除已经上传的文件

5.上传并解析，匹配表头重组数组 

// 文件上传自定义
        async httpExcelRequest(op) {
            // 获取除文件之外的参数，具体根据实际业务需求来
            console.log(op.data)
            // 获取上传的excel  并解析数据
            const file = op.file
            const dataBinary = await this.readFile(file)
            const workBook = xlsx.read(dataBinary, { type: 'binary', cellDates: true })
            const workSheet = workBook.Sheets[workBook.SheetNames[0]]
            const excelData = xlsx.utils.sheet_to_json(workSheet, { header: 1 })
            // 提取列名
            const headers = excelData[0]
            // 移除列名行
            excelData.shift()
            // 创建映射关系，将中文列名映射到你想要的属性名
            const headerMap = {
                经度: 'lon',
                纬度: 'lat',
                水位: 'waterLevel'
            }
            // 转换数据行到对象数组
            const tempList = excelData.map((item, index) => {
                const excelItem = {}
                headers.forEach((header, headerIndex) => {
                    excelItem[headerMap[header]] = item[headerIndex]
                })
                return excelItem
            })
            console.log(tempList)
            this.requestForm.waterLevelList=[...this.requestForm.waterLevelList,...tempList]
            if (this.$refs.uploadRefMap) {
                this.$refs.uploadRefMap.clearFiles()
            }
        },

        readFile(file) {
            return new Promise(resolve => {
                const reader = new FileReader()
                reader.readAsBinaryString(file)
                reader.onload = ev => {
                    resolve(ev.target?.result)
                }
            })
        }

希望得到的数据是，所以进行了转换

[
{
lon: '', // 经度
lat: '', // 纬度
waterLevel: '' // 水位
}
]