JS解析Excel文件

通常,一般读取Excel都是由后台来处理,不过如果需求要前台来处理,也是可以的。

先上代码,效果图在页尾:
1.需要用到js-xlsx,GitHub上的下载地址:js-xlsx,(若打不开,可以自己百度js-xlsx搜索下载即可);
2.demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./js/xlsx.full.min.js"></script>
    </head>
    <body>
        <input type="file"onchange="importf(this)" />
        <div id="demo"></div>
        <script>
            /*
            FileReader共有4种读取方法:
            1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
            2.readAsBinaryString(file):将文件读取为二进制字符串
            3.readAsDataURL(file):将文件读取为Data URL
            4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
                         */
            var wb;//读取完成的数据
            var rABS = false; //是否将文件读取为二进制字符串

            function importf(obj) {//导入
                if(!obj.files) {
                    return;
                }
                var f = obj.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'
                        });
                    }
                    //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                    //wb.Sheets[Sheet名]获取第一个Sheet的数据
                    document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
                };
                if(rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }

            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;
            }
        </script>
    </body>
</html> 

效果图:

20170514_140639.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,977评论 25 708
  • 目标: 2017年4月——2017年6月实现 1.每月收入10000元 2.家族关系和谐 咖啡冥想:1.每月给母亲...
    闪光的种子阅读 142评论 0 3
  • 上官紫煙焦急地在家裡到處翻找手機,終於在沙發上找到了,它和家門鑰匙躺在一起,上面覆蓋著外套,所以沒注意到。 如今的...
    林素兮阅读 117评论 7 4
  • 外面的世界从来都不缺少美食,但那些独属于家乡的美味,只可在家乡觅得。漂泊在外的人儿胃最思乡,回家后最迫切希望的就是...
    关耳方阅读 688评论 5 3
  • 昨晚在桌前寫時間軸時 被問了一個問題 你寫這個有什麼用 投入和付出成正比嗎 我笑了笑 在心裡想著 我喜歡的東西 ...
    林有朴蔌阅读 216评论 0 0