js读取解析本地Excel文件并分类展示

需求描述

在移动端需要做一个汽车品牌和型号的选择页面。考虑到数据比较多，又基本不会变化，决定把车辆信息数据放在一个Excel表格中作为一个静态资源，需要用时通过js读取并展示。下图是Excel的部分内容：

最终效果

左侧是选择车辆品牌，右侧是选择好车辆品牌之后继续选择车辆型号。

关键代码(读取本地Excel数据)

1、需要提前引入 xlsx.full.min.js 文件。

2、在页面上写一个按钮和展示列表的容器。

<input type="file" id="file"/>
<div id="car-list"></div>

// js读取解析Excel
// 定义一个carData,用来保存读取到的数据
var carData;
$(document).ready(function(){
       
        var wb;//读取完成的数据
        var rABS = false; //是否将文件读取为二进制字符串

        function fixdata(data) { //文件流转BinaryString
            var o = "",
                l = 0,
                w = 10240;
            for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
            o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
            return o;
        }

        $("#file").change(function(){
            if(!this.files) {
                return;
            }
            var f = this.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'
                    });
                }
                
                // carData就是我们需要的JSON数据
                carData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                console.log(carData);   
            };
            if(rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
        })

    });

扩展补充(分类展示代码)

需要引入sortUnicode.js 文件

需要用到的方法：

// 按字母排序并分类(得到排序后的汽车品牌首字母)
function sortFn(dataJson, callback) {
    var list = [];
    for (var i = 0; i < dataJson.length; i++) {
        list.push(dataJson[i].brand);
    }
    // 得到一串首字母数组
    var pinYin = executive(list);

    var arry = [];
    for (var j = 0; j < pinYin.length; j++) {
        arry[j] = pinYin[j];
    }

    //将出现的字符按ascii顺序由小到大存进数组
    var temp;
    for (var m = 0; m < pinYin.length - 1; m++) {
        for (var n = 0; n < pinYin.length - 1 - m; n++) {
            if (pinYin[n] > pinYin[n + 1]) {
                temp = pinYin[n];
                pinYin[n] = pinYin[n + 1];
                pinYin[n + 1] = temp;
            }
        }
    }

    // 返回汽车品牌排序后的首字母
    callback(pinYin);
}

// 得到一串首字母数组
function executive(str) {
    var isEnglishOrNum =  /^[A-Za-z0-9]+$/;            //正则验算是否英文字母或数字
    var arr = [];        //存储各字符串首字母
    var j = 0;
    for(var i=0;i<str.length;i++){
        if(Object.prototype.toString.call(str[i]) === "[object String]"){        //判断是否为字符串
            var sing = str[i].substring(0,1);    //截取字符串首个字符
            var ch = str[i].charCodeAt(0);        //获取字符对应Unicode编码值
            if(isEnglishOrNum.test(sing)){        //判断是否为英文字母或数字
                arr[j++] = sing.toUpperCase();        //是则将字符赋值给数组
            }else{

                if(ch<40869&&ch>=19968){            //判断字符编码值在19968到40869之间
                    arr[j++]=strChineseFirstPY.charAt(ch-19968);            //获取对应表中的字母并赋值到数组
                }else{
                    alert("字符串首字母仅支持字母和数字");
                    return false;
                }
            }
            // 多音字特殊处理,如长安汽车、厦门金龙汽车
            if (sing==='长') {
                arr[j-1] = 'C';
            }
            if (sing==='厦') {
                arr[j-1] = 'X';
            }
        }else{
            console.log("出现有误");
            return false;
        }
    }
    return arr;
}

// 首字母去重
function firstLetterOnlyFn(data) {
    var temp = [];
    for(var i = 0; i < data.length; i++){
        if(temp.indexOf(data[i]) == -1){
            temp.push(data[i]);
        }
    }
    return temp;
}

列表展示代码

var firstLetter;
var firstLetterNoRepeat;

$(function () {
    sortFn(carData, function (pinYin) {
        // 保存排序后的所有首字母
        firstLetter = pinYin;

        // 保存去重后的首字母
        firstLetterNoRepeat = firstLetterOnlyFn(pinYin);

        // 展示品牌列表
        allCarList();
     });
});

// 展示车辆品牌列表
function allCarList() {
    $("#car-list").html('');
    // 生成含有的字母
    var arrangeLi = "";
    for(var k=0;k<firstLetterNoRepeat.length;k++){
        if(firstLetterNoRepeat[k]!=firstLetterNoRepeat[k-1]){
            arrangeLi += "<li class='"+firstLetterNoRepeat[k]+"'><b>"+firstLetterNoRepeat[k]+"</b></li>";
        }
    }
    $("#car-brand-list").html('<ul> ' + arrangeLi + ' </ul>');
    // 生成汽车品牌
    for(var r=firstLetter.length-1;r>=0;r--){
        var firstZm = executive([carData[r].brand]);
        var li = '<li><img src="static/car_logo/' + carData[r].icon + '.png" alt=""><label>' + carData[r].brand + '</label></li>';
        $("."+firstZm[0]+"").after(li);
    }
}

到这里就基本实现了汽车品牌的列表展示，其他细节处理就根据不同的需求略微修改就行了。