node.js动态对.xlsx文件的解析（文件路径不写死）

最终效果: 点击按钮进行选择文件，选择给定的文件类型（.xlsx，xls）后对文件内容进行解析，将.xlsx或.xls转换为json数据.

note: 在知道文件在本地的具体路径时很容易将.xlsx和.xls文件解析成json，所以一般情况会将文件上传至服务器的某个路径下，由后端代码进行读取和转换，但是这样会增加服务器的压力，如果只是需要xlsx中的部分数据，完全没必要将文件上传过去，可以在本地对.xlsx文件进行解析，获取目标数据，然后将目标数据作为请求的参数，实现功能。

下面便是怎么在前端对解析.xlsx格式的文件。

首先 ，要安装node的xlsx插件

npm  install xlsx

在文件中引入 xlsx

import XLSX from 'xlsx'

实现点击按钮进入文件选择框进行选择文件的方式有很多种，这里选择最简单的，在Button里面添加一个input

<div>
    <Button>
        <Icon type = 'upload' />
        <input className = 'uploader' type = 'file' accept = '.xlsx,.xls' onchange= {this.uploader}>
        <span> 选择文件 </span>
    </Button>
</div>

有些标签首字母大写是因为那个组件是我引入的antd组件。部分css没写，不影响功能。

然后需要对按钮事件进行监听，获取到选择的文件，以二进制的读取文件并解析

uploader = e =>{
    var files = e.target.files;
    const reader = new FileReader();
    reader.readAsBinaryString(files[0]);
    reader.onload = event =>{
        try{
            var data = event.target.result;
            var workbook = XLSX.read(data,{
                        type:'binary'
                    });
            var xlsxData = [];
        }catch(e){
            console.log('文件格式不正确');
            return;
        }
        
        dataUtil(workbook,xlsxData);
    }
}

dataUtil =(workbook,xlsxData) =>{
    var myJson = {                    //先定义好一个json对象，便于数据存放
        xxx:' ',
        yyy:' ',
        zzz:' '   
    }
    
    var fromHeader = '';             //存放表的起始和结尾（横纵坐标）
        
    for (var sheet in workbook.Sheets){        //解析.xlsx文件中的所有sheet
        if(workbook.Sheet.hasOwnProperty(sheet)){    
            fromHeader = workbook.Sheets[sheet]['!ref'];  //获取当前sheet的起始和结尾
            xlsxData =     
                xlsxData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            //xlsxData便是当前sheet中所有元素的json数据
            myJson.xxx = xlsxData[1].__EMPTY_1;      //将当前sheet中的第一行的第一个值赋值给自定义对象的xxx  
        }
    }
}

看似乎很繁琐，其实很方便的