前端使用xlsx插件读取excel文件数据

安装xlsx插件

npm install xlsx

导入xlsx

import XLSX from 'xlsx'

前端UI如下：

<bk-upload
        :tip="'只允许上传JPG、PNG、JPEG的文件'"
        :with-credentials="true"
        :accept="'.xlsx, .xls'"
        @custom-request="getExcel"
        :multiple="false">
</bk-upload>

点击上传：

getExcel (file) {
    console.log(file)
     const types =file.fileObj.name.split(".")[1] 
    const fileType = ["xlsx","xls"].some( 
        item => item === types 
    ) 
    if(!fileType){ 
        return false
    }
    this.analysis(file).then(tableJson =>{ 
        if (tableJson && tableJson.length > ){
            this.formData.storages =[]
            const dataExcel=tableJson[0] 
            const data=JSON.parse(JSON.stringify(dataExcel.sheet)) 
            const items = data.map(ite => { 
                return { 
                    'dish_num':ite['盘号'],
                    'store_name':ite['数据存储名'],
                    'key': ite['盘号'] +'_'+ ite['数据存储名'] 
                }
            }) 
            this.formData.storages = items 
        }
    })
}

得到的文件信息如下，在这里只需要关注fileList中的origin内容

对得到的文件信息进行处理，使用FileReader

主要分为三步:

1、构建FileReader对象
2、使用reader.readAsBinaryString()指定需要读取的内容，一旦完成，result属性中将包含所读取文件的原始二进制数据
3、在reader.onload中触发读取完成之后的操作

analysis (file){
    return new Promise(function (resolve) {
        # 1、构建FileReader对象
        const reader =new FileReader()
        # 3、读取完成时的操作
        reader.onload = function (e){
            # 使用XLSX解析读取到的数据
            const data = e.target.result
            const datajson = XLSX.read(data, {type: "binary"})
            const result = []
            datajson.SheetNames.forEach(sheetName => {
                result.push({
                    sheetName: sheetName,
                    sheet: xLsx.utils.sheet_to_json(datajson.Sheets[sheetName])
                })
            })
            resolve(result)
        }
        # 2、传入需要读取的内容
        reader.readAsBinaryString(file.fileList[0].origin)
    })
}

XSLX解析二进制数据，使用XLSX.read(data, {type: type})来完成

type的类型如下

base64: 以base64方式读取
binary: BinaryString格式(byte n is data.charCodeAt(n))
string: UTF8编码的字符串
buffer: nodejs Buffer
array: Uint8Array，8位无符号数组
file: 文件的路径（仅nodejs下支持）

我们这里使用的是binary，读取到的数据如下：

解析sheet的方法如下：

XLSX.utils.sheet_to_csv：生成CSV格式
XLSX.utils.sheet_to_txt：生成纯文本格式
XLSX.utils.sheet_to_html：生成HTML格式
XLSX.utils.sheet_to_json：输出JSON格式

我们在这里使用XLSX.utils.sheet_to_json，XLSX.utils.sheet_to_json(data, type)有两个参数，第一个是我们wordBook对象里面Sheets对象对应的数据，第二个参数配置如下：

raw: 使用原始值 (true) 或格式化字符串 (false)  （默认值：true）
dateNF: 在字符串输出中使用指定的日期格式（默认值：FMT 14）
defval: 使用指定值代替 null 或 undefined （）
blankrows: 在输出中包含空行**（默认值：** ）
range: 

        (number)使用工作表范围，但将起始行设置为值

        (String)使用指定范围（A1 样式的有界范围字符串

        (default)使用工作表范围 ( worksheet[‘!ref’])

header:

        1: 生成数组数组（“二维数组”）

        "A".行对象键是文字列标签

        array of strings: 使用指定的字符串作为行对象中的键

        (default): 将第一行作为键读取并消除歧义

默认是将第一行作为键读取数据，xLsx.utils.sheet_to_json(datajson.Sheets[sheetName])读取到的数据如下：

扩展：读取复杂表头的表格

复杂表头使用，XLsx.utils.sheet_to_json(datajson.Sheets[sheetName], {header: 1}，生成二维数组

mulAnalysis (file){
    return new Promise(function (resolve) {
        const reader = new FileReader()
        reader.onload = function(e){
            const data =e.target.result
            const datajson = XLSx.read(data,{type: "binary"})
            const result = []
            datajson.SheetNames.forEach(sheetName => {
                const items = XLsx.utils.sheet_to_json(datajson.Sheets[sheetName], {header: 1}
                result.push({
                    sheetName: sheetName,
                    sheet: items.splice(2, items.length)
                })
            })
            resolve(result)
        }
        reader.readAsBinaryString(file.fileList[0].origin)
    })
}