SheetJS的使用（js-xlsx）

深藏阁楼爱情的钟 2021-11-27 06:06 1493阅读 0赞

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>

页面效果：

![20190726143026844.png][]

要读取的文件：

![20190726143407650.png][]

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

[js-xlsx]: https://github.com/SheetJS/js-xlsx
[20190726143026844.png]: /images/20211126/a5d524aa18a24d91879b36b1f08c5b7c.png
[20190726143407650.png]: /images/20211126/5e715618c1a745769ccf64d21d34b083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20211126/2aac4925f0fb4801bdb31f7612e7977a.png