1. 程式人生 > >使用JS對Excel匯入

使用JS對Excel匯入

最近今天都在做前端頁面對excel的匯入匯出,忙中偷閒,對此做一下總結 本篇先寫匯入Excel,匯出Excel將在下一篇給出 關於excel匯入的方法都是寫在前端js中 需要引入的js檔案 xlsx.full.min.js(js解析excel主要用到的js工具檔案) 下載地址(想在程式碼區裡貼出來的,可是太多了,而且亂碼) 下面的例子從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>

頁面效果 效果圖