Excel 到 JSON javascript 代码？答案

【问题标题】：Excel to JSON javascript code?Excel 到 JSON javascript 代码？
【发布时间】：2015-05-01 04:03:05
【问题描述】：

我想将 excel 工作表数据转换为 json。它必须是动态的，因此有一个上传按钮，用户可以在其中上传 excel 表格，然后将数据转换为 json。你能提供我的javascript代码吗？我尝试了 SheetJS 但无法弄清楚。我更喜欢直截了当的东西:)

非常感谢您的帮助！

【问题讨论】：

如果您不提供自己的代码/示例/尝试，SOF 上的人不会只给您代码。作为提示，使用 PHP 将文件读入数组，然后使用 json_encode...
使用 Javascript 将其转换为客户端是最佳选择吗？
我只想使用javascript。我没有自己的代码，我只是从 SheetJS 中获取代码并尝试操作，但它不适合。所以我正在寻找直接的 javascript 代码
嗯，给我几分钟，我看看我能为你做什么
更新并添加了第二个示例来展示如何生成表格

标签： javascript html

【解决方案1】：

注意：不是 100% 跨浏览器

检查浏览器兼容性@ http://caniuse.com/#search=FileReader

你会看到人们对不太常见的浏览器有问题，但这可能归结为浏览器的版本。我总是建议使用 caniuse 之类的东西来查看哪一代支持浏览器...这只是用户的工作答案，而不是供人们使用的最终复制和粘贴代码..

小提琴：http://jsfiddle.net/d2atnbrt/3/

HTML 代码：

<input type="file" id="my_file_input" />
<div id='my_file_output'></div>

JS 代码：

var oFileIn;

$(function() {
    oFileIn = document.getElementById('my_file_input');
    if(oFileIn.addEventListener) {
        oFileIn.addEventListener('change', filePicked, false);
    }
});


function filePicked(oEvent) {
    // Get The File From The Input
    var oFile = oEvent.target.files[0];
    var sFilename = oFile.name;
    // Create A File Reader HTML5
    var reader = new FileReader();

    // Ready The Event For When A File Gets Selected
    reader.onload = function(e) {
        var data = e.target.result;
        var cfb = XLS.CFB.read(data, {type: 'binary'});
        var wb = XLS.parse_xlscfb(cfb);
        // Loop Over Each Sheet
        wb.SheetNames.forEach(function(sheetName) {
            // Obtain The Current Row As CSV
            var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);   
            var oJS = XLS.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);   

            $("#my_file_output").html(sCSV);
            console.log(oJS)
        });
    };

    // Tell JS To Start Reading The File.. You could delay this if desired
    reader.readAsBinaryString(oFile);
}

这还需要https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.js 转换为可读格式，我也使用 jquery 仅用于更改 div 内容和 dom 就绪事件.. 所以不需要 jquery

这是我能做到的最基础的，

编辑 - 生成表格

小提琴：http://jsfiddle.net/d2atnbrt/5/

第二个小提琴展示了一个生成你自己的表的例子，这里的关键是使用 sheet_to_json 来获取正确格式的数据以供 JS 使用..

第二个小提琴中的一个或两个 cmets 可能不正确，因为第一个小提琴的修改版本.. CSV 注释至少是

测试 XLS 文件：http://www.whitehouse.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls

这不包括 XLSX 文件的想法，使用他们的示例进行调整应该相当容易。

【讨论】：

不幸的是，我尝试了小提琴，但上传 excel 表格后它什么也没做。
尝试使用这个文件：whitehouse.gov/sites/default/files/omb/budget/fy2014/assets/…，因为它是我正在测试的文件，它是他们演示页面上建议的文件。
你能检查你的浏览器控制台是否有js错误，你使用的是什么浏览器？
是的，它有效！ .抱歉，我上传了错误的文件。
我想我在这里给你的已经够多了，如果你需要更多的帮助，我会推荐教程和一些基础知识。

【解决方案2】：

js-xlsx 库可以轻松地将 Excel/CSV 文件转换为 JSON 对象。

从here 下载 xlsx.full.min.js 文件。在您的 HTML 页面上编写以下代码编辑引用的js文件链接（xlsx.full.min.js）和Excel文件的链接

<!doctype html>
<html>

<head>
    <title>Excel to JSON Demo</title>
    <script src="xlsx.full.min.js"></script>
</head>

<body>

    <script>
        /* set up XMLHttpRequest */
        var url = "http://myclassbook.org/wp-content/uploads/2017/12/Test.xlsx";
        var oReq = new XMLHttpRequest();
        oReq.open("GET", url, true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function(e) {
            var arraybuffer = oReq.response;

            /* convert data to binary string */
            var data = new Uint8Array(arraybuffer);
            var arr = new Array();
            for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            var bstr = arr.join("");

            /* Call XLSX */
            var workbook = XLSX.read(bstr, {
                type: "binary"
            });

            /* DO SOMETHING WITH workbook HERE */
            var first_sheet_name = workbook.SheetNames[0];
            /* Get worksheet */
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log(XLSX.utils.sheet_to_json(worksheet, {
                raw: true
            }));
        }

        oReq.send();
    </script>
</body>
</html>

输入：

输出：

【讨论】：

很好，但问题是上传 Excel 文件。他没有具体说明是要在客户端还是服务器上进行转换。您的示例是从服务器下载 Excel 文件。
其实我一直在寻找这个解决方案，但是如何将json数据打印到html正文中呢？
我已经尝试了 3 天来直接从本地文件夹中读取 excel，而不必通过事件触发它，直到我遇到这个才幸运。这非常有效！非常感谢（投票赞成）。
对此我有 2 个问题。您已经回答了这里的两个问题！如果您可以在 2 个问题上给出相同的答案，我很乐意接受您的回答。 stackoverflow.com/questions/70260394/…stackoverflow.com/questions/70285330/…
@user7456320, myclassbook.org 链接已损坏。

【解决方案3】：

答案适用于 xls 格式，但就我而言，它不适用于 xlsx 格式。因此，我在这里添加了一些代码。它适用于 xls 和 xlsx 格式。

我从官方sample link那里拿了样本。

希望对你有帮助！

function fileReader(oEvent) {
        var oFile = oEvent.target.files[0];
        var sFilename = oFile.name;

        var reader = new FileReader();
        var result = {};

        reader.onload = function (e) {
            var data = e.target.result;
            data = new Uint8Array(data);
            var workbook = XLSX.read(data, {type: 'array'});
            console.log(workbook);
            var result = {};
            workbook.SheetNames.forEach(function (sheetName) {
                var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: 1});
                if (roa.length) result[sheetName] = roa;
            });
            // see the result, caution: it works after reader event is done.
            console.log(result);
        };
        reader.readAsArrayBuffer(oFile);
}

// Add your id of "File Input" 
$('#fileUpload').change(function(ev) {
        // Do something 
        fileReader(ev);
}

【讨论】：

很好，但问题是上传 Excel 文件。他没有具体说明是要在客户端还是服务器上进行转换。您的示例是从服务器下载 Excel 文件。

【解决方案4】：

@Kwang-Chun Kang 非常感谢Kang！我发现该解决方案有效且非常有帮助，它确实节省了我的时间。对我来说，我正在尝试创建一个 React.js 组件，当用户将 excel 文件上传到 html 输入标签时，它将 *.xlsx 转换为 json 对象。首先我需要安装 XLSX 包：

npm install xlsx --save

然后在我的组件代码中，导入：

import XLSX from 'xlsx'

组件 UI 应如下所示：

<input
  accept=".xlsx"
  type="file"
  onChange={this.fileReader}
/>

它调用了一个函数fileReader()，这与提供的解决方案完全相同。要了解有关 fileReader API 的更多信息，我发现此博客很有帮助： https://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

【讨论】：