前端导入excel文件

excel导入在管理系统中是必不可少的一项功能，它的实现对于新手来说也是比较复杂；

要想实现excel导入，就必须了解怎么读取excel文件

https://www.jianshu.com/p/67c875cb9c32

好了，话不多说，我们开始吧

这个导入功能，我使用了Jexcel.js插件

    


    预览


     

          

             

                    请选择
                    
                        
                    
              
                 
   
                     Save changes
                 
            
       

第一步：先使用xlsx.js读取excel文件
第二步：把获取的数据转成jexcel需要的数据格式
_{javascript代码}

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串

function importf(obj) {//导入
    if(!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = e.target.result;
        if(rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }

        var snames = wb.SheetNames;//获取所有的sheet表名
        for(var i=0;i'+snames[i]+'');
        }
        let excelData = [];
        var seltext;
        $("#btnOk").click(function(){
            seltext=$('#sel option:selected').text();
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            excelData= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[seltext]) );
            dataShow (excelData,seltext);
        });
            
        }
    };
    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}

因为我们有时候导入的excel文件是的多个sheet表的，如果把他们都放到一个页面进行统一展示的话会比较乱，所以我做了一个下拉框，让客户自己预览那张表

var snames = wb.SheetNames;//获取所有的sheet表名
        for(var i=0;i'+snames[i]+'');
        }
        let excelData = [];
        var seltext;
        $("#btnOk").click(function(){
            seltext=$('#sel option:selected').text();
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            excelData= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[seltext]) );
            dataShow (excelData,seltext);
        });

b2.PNG

下面的这段代码是我为了符合jexcel进行的一系列格式转化

function dataShow (persons,selname) {
            console.log(persons);
            var allRow=[],
            allCol=[],
            arr=[],
            objData=eval(persons);
            var num2;
            for(var i=1,j=0;i=num2){
                    allRow[j]=[];
                    arr={}; //js中二维数组必须进行重复的声明，否则会undefind  
                    allRow[j].push(objData[i][selname]);
                    for(var key in objData[i]){
                        if(key!=selname){
                            arr['text'+[j]]=objData[i][key];
                        }
                        if(arr['text'+[j]]!=undefined){
                            allRow[j].push(arr['text'+[j]]);
                        }
                    }
                }
            }

下面的代码就是jexcel.js使用了，想更多的了解jexcel.js
就找：https://bossanova.uk/jexcel

$('#my').jexcel({
                data:allRow,
                colHeaders:allCol,
                csvHeaders :true ,
                tableOverflow :true ,
                tableHeight:'450px',
                colWidths:colW(),
            });
            function colW(){
                let col=[];
                for(var m=0;m