使用JS对Excel导入

最新推荐文章于 2024-08-14 17:10:04 发布

L一刀G_

最新推荐文章于 2024-08-14 17:10:04 发布

阅读量1.2k

点赞数 1

分类专栏： JS 文章标签：前端开发 JS

本文链接：https://blog.csdn.net/CROSSFIT/article/details/82805028

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近今天都在做前端页面对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>

页面效果
效果图