【VUE】纯前端实现上传Excel文件，并读出来

最新推荐文章于 2024-10-11 01:03:52 发布

门前大桥下www

最新推荐文章于 2024-10-11 01:03:52 发布

阅读量909

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/hggl_bera/article/details/113182600

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

功能

数据上传处理一般都是后端去做的，但最近开发中遇到了前端处理数据的情况，无法让后端处理Excel表格，因此前端对Excel数据进行处理

实现

基于element、XLSX.js

代码

<el-upload
    action="#"
    :http-request="handleHttpRequest">
    <el-button id="uploadButton" size="small" type="primary">上传</el-button>
</el-upload>

handleHttpRequest(file:{}) {
    if (!!file) {
        const reader = new FileReader()
        const upload_sheet_file = _.get(file, 'file')

        if (upload_sheet_file) {
            reader.onload = (e: any) => {
                try {
                    onst data = e.target.result
                    const workbook = XLSX.read(data, {
                        raw: true,
                        cellNF: true,
                        cellText: true,
                        type: 'binary',
                        cellDates: true,
                        cellFormula: true
                    })
                    if (workbook) {
                        const analyze_row_list = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
                        analyze_row_list.forEach(item => {
                            let row = {}
                            for(let key in item) {
                                this.dataHeadList.forEach(head => {
                                    if (key == head.name) {
                                        this.$set(row, head.binding, item[key])
                                    }
                                })
                            }
                            this.showTableData.push(row)
                        })
                    }
                } catch(e) {
                    this.$message('解析失败')
                } finally {
                    console.log('解析操作完成')
                }
            }
        }
        reader.readAsBinaryString(upload_sheet_file)
    }
}