前端简单读取excel文件

背景:有时需要录入一些数据,所以拿到的是excel文件,需要进行读取文件数据,转成数组等方式作为可复制的数据直接进行存储。
处理方法:可以借助上传组件拿到上传文件数据,使用xlsx插件,进行读取excel文件数据。
tip:当表头比较复杂,可以通过手动修改excel文件表头为一维表头,减少数据操作复杂度。

// 1、安装xlsx
npm i xlsx -S
// 2、直接借助组件库,选择文件上传,例如 el-upload组件的on-change事件拿到选中文件
<el-upload 
    action="" 
    :limit="1" 
    :on-change="submitUpload"
>
    <el-button>select</el-button>
</el-upload>
<script>
import * as xlsx from 'xlsx'

const submitUpload = (file) => {
    // 定义数据对应的excel表头名及存储的key值
    const columnKey = {
        name: '姓名',
        age: '年龄',
        male: '性别'
    }
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
        const data = e.target.result
        // 读取文件数据
        const workbook = xlsx.read(data, {type: 'binary'})
        // 读取文件指定表
        const exlname = workbook.SheetNames[0]
        // 拿到表数据
        const exl = xlsx.utils.sheet_to_json(workbook.Sheets[exlname])
        
        // 数据处理,处理成自己想要的数据或其他格式
        let arr = []
        exl.forEach(item => {
            let obj = {}
            Object.keys(columnKey).forEach(key => {
                obj[key] = item[columnKey[key]]
            })
            arr.push(obj)
            })
        })
        console.log(arr, '拿到的数据')
    }
    // 组件中包装的file数据是在file.raw中,传入文件数据
    fileReader.readAsArrayBuffer(file.raw)
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容