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

3 篇文章 0 订阅
2 篇文章 0 订阅

有些项目中有这样的需求,导入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);
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值