SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本。

下载js-xlsx解压进入dist目录复制出xlsx.full.min.js引入到页面中

<!DOCTYPE html>
<header>
    <meta charset="utf-8">
    <title>read excel to json</title>
</header>
<body>
<div style="margin:20px">
<input type="file" onchange="change(this)" style="width: 320px;"
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
<pre><p style="font-family: sans-serif;"></p></pre>
</div>
<script src="xlsx.full.min.js"></script>
<script>
    var excelData;
    function change(obj) {
        if (!obj.files) {
            return;
        }
        var file = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            excelData = XLSX.read(data, {
                type: 'binary'
            });
            //excelData.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //excelData.Sheets[Sheet名]获取第一个Sheet的数据
            var json = XLSX.utils.sheet_to_json(excelData.Sheets[excelData.SheetNames[0]]);
            document.querySelector("p").innerHTML = JSON.stringify(json, null, "\t");
        };
        reader.readAsBinaryString(file);
    }
</script>
</body>
</html>

页面效果:

SheetJS的使用(js-xlsx)_json

要读取的文件:

SheetJS的使用(js-xlsx)_Data_02

结果:

SheetJS的使用(js-xlsx)_html_03