Javascript解析Excel数据

最新推荐文章于 2025-05-14 09:31:35 发布

赵得C

最新推荐文章于 2025-05-14 09:31:35 发布

阅读量1.8w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web JavaWeb

本文链接：https://blog.youkuaiyun.com/zhaodecang/article/details/77996517

JavaWeb 同时被 2 个专栏收录

9 篇文章

订阅专栏

Web

7 篇文章

订阅专栏

本文介绍如何使用xlsx.full.min.js库和FileReader API将Excel文件转换为JSON格式数据。通过具体的JavaScript代码示例，展示了四种不同的读取文件方法，并实现了一个简单的文件上传功能，能够将Excel内容解析并显示为JSON。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用到的js文件 xlsx.full.min.js

2、FileReader共有4种读取方法：

1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'

3、在需要解析excel的元素点击事件中调用如下importf(this);方法：

<script>
    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>

4、点击上传一个excel文件会将excel内的数据逐行解析成json数据

excel数据解析完之后如下

<body>
    <input type="file"onchange="importf(this)" />
    <div id="demo"></div>
</body>