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);
    }
}

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

 

  • 5
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现在浏览器页面中展示本地 Excel 文件,可以通过以下步骤实现: 1. 使用 JavaScript FileReader API 读取本地 Excel 文件,并将其转换为二进制数据。 2. 使用第三方库如 SheetJS 或 Handsontable 解析 Excel 文件,并将其转换为可视化的数据表格。 3. 将解析出的数据表格插入到 HTML 页面中,以展示在浏览器页面中。 以下是一个基本实现的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>展示本地 Excel 文件</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script> </head> <body> <input type="file" id="fileInput" /> <div id="table"></div> <script> const fileInput = document.getElementById('fileInput'); const tableDiv = document.getElementById('table'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, {type: 'array'}); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const json = XLSX.utils.sheet_to_json(worksheet, {header: 1}); const table = buildTable(json); tableDiv.innerHTML = ''; tableDiv.appendChild(table); }; reader.readAsArrayBuffer(file); }); function buildTable(data) { const table = document.createElement('table'); for (let i = 0; i < data.length; i++) { const row = table.insertRow(-1); for (let j = 0; j < data[i].length; j++) { const cell = row.insertCell(-1); cell.textContent = data[i][j]; } } return table; } </script> </body> </html> ``` 这个示例中使用了 SheetJS 库来解析 Excel 文件,使用了 HTML 的 `<table>` 元素来展示数据表格。用户选择本地 Excel 文件后,会触发 `change` 事件,然后读取文件解析成数据表格,并插入到 HTML 页面中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值