js 导入Excel文件，使用xlsx插件获取其中数据

有些项目中有这样的需求，导入Excel文件，并使用xlsx插件获取其中数据。附带ie兼容问题解决方法。

1、安装并引入xlsx

npm install xlsx --save

import XLSX from 'xlsx'

2、通过file输入框选择Excel文件

3、监听file输入框中值的变化，当里面文件改变时，对文件进行处理。这里监听输入框的change事件，代码如下：

fileChange(e){
    let file = e.target.files[0];
    //校验文件格式
    if(!file.name.endsWith('xlsx')&&!file.name.endsWith('xls')){
       alert ("文件格式错误，请按指定模板导入真实有效的数据！" );
       return
    }
    //读取文件
    const fileReader = new FileReader();
    fileReader.onload=event=>{
        try{
            let result=''
            if(event){
                result=event.target.result;
            }else{
                result=fileReader.content;
            }
            const workbook=XLSX.read(result,{type:"binary"});
            let data=[];
            for(const sheet in workbook.Sheets){
                if(workbook.Sheets.hasOwnProperty(sheet)){
                    data=data.concat(
                        XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
                    )
                }
            }
            //对数据的其他操作
        }catch(e){
            alert('文件解析失败')
        }
    };
    fileReader.readAsBinaryString(file);
}

*ie浏览器中，FileReader有兼容问题，可引入以下代码进行兼容：

if(!FileReader.prototype.readAsBinaryString){
    FileReader.prototype.readAsBinaryString=function(fileData){
        var binary="";
        var that=this;
        var reader=new FileReader();
        reader.onload=function(e){
            var bytes=new Uint8Array(reader.result);
            var _length=bytes.byteLength;
            for(var i=0;i<_length;i++){
                binary+=String.fromCharCode(bytes[i]);
            }
            that.content=binary;
            that.onload()
        }
    }
    reader.readAsArrayBuffer(fileData);
}

 

本文地址：https://blog.csdn.net/cha1919/article/details/107379591