vue+element 导入excel文件

记录一下导入excel文件的使用，现在导入excel的话大部分使用的都是 xlsx 插件，导入的话只需要下载一个xlsx包就行

$ npm i xlsx

也是根据网上看到的教程做下去的，下面是具体的步骤：

1.先封装一个读取二进制文件的方法

// 把文件按照二进制方式读取
export const readFile = file =>{
        return new Promise(resolve => {
            let reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = ev =>{
                resolve(ev.target.result)
            }
        })
}

2.使用element里面的el-upload来上传文件的

Tips:
1.action：必选参数，上传的地址，这边因为不需要立即上传所以就没有写地址，但是这个参数必须要有；
2.accept ： 接受上传的文件类型（thumbnail-mode 模式下此参数无效）；
3.auto-upload：是否在选取文件后立即进行上传，我这边是不需要，写的false；
4.show-file-list：是否显示已上传文件列表，这边也是不需要的就写的false；
5.on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，主要就是获取到上传文件后返回的里面的 raw

读取文件列表

image.png

3.主要实现的代码

 // 导入文件
     async  inputFile(e){
        console.log(e)
        this.inputFileName = e.name
        let file = e.raw
        if(!file) return
        console.log(file)
        // 读取file文件的内容(转换为json格式)
        let data = await readFile(file) 
        console.log(data) //解析出的二进制文件
        // type :'binary' 类型为二进制
        let eleData = xlsx.read(data,{type:"binary"})
        console.log(eleData) 
        let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]] 
        eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式（xlsx自带的方法）
        // eleData = eleData.length >1? eleData[1] : eleData[0]
        console.log(eleData)
        const arr =[]
        console.log(Object.keys(changeCnToEn))
        eleData.forEach(item =>{
         const userInfo = {}
        //  console.log(Object.keys(item))
          Object.keys(item).forEach(key => {
          userInfo[changeCnToEn[key]] = item[key]
        })
        // console.log(userInfo)
        arr.push(userInfo)
       })
       this.tableLIst = arr
       console.log(arr)
      }
    }
}

Tips:关键代码的解释

1. 使用前面封装的readFile将文件转换为二进制形式，使用slsx的read方法将，指定其type:binary(指定读取的类型为二进制文件）**

        let data = await readFile(file) 
        console.log(data) //解析出的二进制文件
        // type :'binary' 类型为二进制
        let eleData = xlsx.read(data,{type:"binary"})
        console.log(eleData) 

转换完成的数据

image.png

2.我们主要获取的是sheets里面的数据

// 获取Sheets里面的第一条数据，就是excel表中下面第一页的数据
let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]] 

excel表中第一页

image.png

3.使用slsx自带的方法sheet_to_json将其转换为json数据

 eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式（xlsx自带的方法）

获取到的数据

image.png

4.可以看到此时的数据已经转换完成了，但他们都是中文的，但是我们需要传到后端的数据肯定不能都是中文，所以需要在进行一次转换

         // 转换的方法
         const arr =[]
         eleData.forEach(item =>{
         const userInfo = {}
          Object.keys(item).forEach(key => {
          // key为中文，在changeCnToEn 中拿到中文对应的英文，在遍历的item 
          //中获取到中文对应的数据
          userInfo[changeCnToEn[key]] = item[key]
        })
        arr.push(userInfo)
       })
// 转换传入的excel中文到英文
export const changeCnToEn = {
    '关系':'relation', 
    '失能情况':'Disability',
    '姓名':'Name', 
    '慢性病':'chronicDsease',
    '所在区县':'DistrictCounty'
}
将里面的中文全部都转换为对应的英文

转换后的数据

image.png

这个时候获取到的数据就是正常的，可以显示或者直接传给后端