使用JS对Excel导入

最近今天都在做前端页面对excel的导入导出,忙中偷闲,对此做一下总结
本篇先写导入Excel,导出Excel将在下一篇给出
关于excel导入的方法都是写在前端js中
需要引入的js文件
xlsx.full.min.js(js解析excel主要用到的js工具文件)
下载地址(想在代码区里贴出来的,可是太多了,而且乱码)
https://download.csdn.net/download/crossfit/10681680
下面的例子从excel读取的数据保存在一个Array对象中,读取的数据以excel表格文件的行为单位,每一行作为一个JS对象,也就是作为Array数组的一个元素,其中,每一行的每一列都是一个属性值(value),对象的首个key为表格第一行第一列的内容,往后依次为__EMPTY,__EMPTY_1,__EMPTY_2… 如:
excel文件
excel文件实例
Array数组
array数组实例
html实例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/xlsx.full.min.js"></script>
        <style type="text/css">
            td {
                height: 20px;
                width: 60px;
            }
        </style>
    </head>

    <body>
        <input type="file" onchange="importf(this)" />
        <div id="demo"></div>
        <table width="60%" border="1" cellspacing="1" cellpadding="4">
            <thead>
                <tr>
                    <th colspan="4">人员信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="4">一、人员基本信息</td>
                </tr>
                <tr>
                    <td>名字</td>
                    <td id="name"></td>
                    <td>年龄</td>
                    <td id="age"></td>
                </tr>
                <tr>
                    <td>住址</td>
                    <td id="address"></td>
                    <td>职业</td>
                    <td id="work"></td>
                </tr>
                <tr>
                    <td colspan="4">二、其他信息</td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>微信号</td>
                    <td>QQ号</td>
                    <td>微博</td>
                </tr>
                <tr>
                    <td id="phone"></td>
                    <td id="weichat"></td>
                    <td id="qq"></td>
                    <td id="weibo"></td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="3" id="remarks"></td>
                </tr>
            </tbody>
        </table>
        <script>
            var rABS = false; //是否将文件读取为二进制字符串
            //导入excel方法
            function importf(obj) {
                if(!obj.files) {
                    return;
                }
                var f = obj.files[0]; {
                    var reader = new FileReader();
                    var name = f.name;
                    reader.onload = function(e) {
                        var data = e.target.result;
                        var wb;
                        if(rABS) {
                            wb = XLSX.read(data, {
                                type: 'binary'
                            });
                        } else {
                            var arr = fixdata(data);
                            wb = XLSX.read(btoa(arr), {
                                type: 'base64'
                            });
                        }
                        //outdata是从excel中读取的数据,此处为Array数组类型
                        //注:读取的数据以行为单位,每一行作为一个JS对象,也就是作为Array数组的一个元素,其中,每一行的每一列都是一个属性值(value),对象的首个键(key)为表格第一行第一列的内容,往后依次为__EMPTY,__EMPTY_1,__EMPTY_2.....
                        var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        //名字
                        document.getElementById("name").innerHTML = outdata[1].__EMPTY;
                        //年龄
                        document.getElementById("age").innerHTML = outdata[1].__EMPTY_2;
                        //地址
                        document.getElementById("address").innerHTML = outdata[2].__EMPTY;
                        //职业
                        document.getElementById("work").innerHTML = outdata[2].__EMPTY_2;
                        //手机号
                        document.getElementById("phone").innerHTML = outdata[5].人员数据表;
                        //微信号
                        document.getElementById("weichat").innerHTML = outdata[5].__EMPTY;
                        //QQ
                        document.getElementById("qq").innerHTML = outdata[5].__EMPTY_1;
                        //微博
                        document.getElementById("weibo").innerHTML = outdata[5].__EMPTY_2;
                        //备注
                        document.getElementById("remarks").innerHTML = outdata[6].__EMPTY;
                        console.log(outdata);
                    };
                    if(rABS) reader.readAsBinaryString(f);
                    else reader.readAsArrayBuffer(f);
                }
            };
            function fixdata(data) {
                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;
            }
        </script>
    </body>
    
</html>

页面效果
效果图

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值