Fatal编程技术网

Excel到JSON javascript代码？

javascript html

Excel到JSON javascript代码？,javascript,html,Javascript,Html,我想将excel工作表数据转换为json。它必须是动态的，因此有一个上载按钮，用户在其中上载excel工作表，然后将数据转换为json。你能给我提供javascript代码吗？我试过SheetJS，但不明白。我更喜欢直截了当的：） 我真的很感谢你的帮助 注意：不是100%跨浏览器 检查浏览器兼容性@ 正如您将看到的，人们对不太常见的浏览器存在问题，但这可能归结为浏览器的版本。。我总是建议使用类似于caniuse的工具来查看支持哪一代浏览器。。。这只是用户的工作答案，而不是供用户使用的最终复制粘贴

我想将excel工作表数据转换为json。它必须是动态的，因此有一个上载按钮，用户在其中上载excel工作表，然后将数据转换为json。你能给我提供javascript代码吗？我试过SheetJS，但不明白。我更喜欢直截了当的：）

我真的很感谢你的帮助

注意：不是100%跨浏览器

检查浏览器兼容性@

正如您将看到的，人们对不太常见的浏览器存在问题，但这可能归结为浏览器的版本。。我总是建议使用类似于caniuse的工具来查看支持哪一代浏览器。。。这只是用户的工作答案，而不是供用户使用的最终复制粘贴代码

小提琴：

HTML代码：

<input type="file" id="my_file_input" />
<div id='my_file_output'></div>
这还需要转换为可读的格式，我还使用jquery仅用于更改div内容和dom就绪事件。。因此不需要jquery

这是我能得到的最基本的

编辑-生成表格

小提琴：

第二部分显示了一个生成您自己的表的示例，这里的关键是使用sheet_to_json以正确的格式获取数据供JS使用

第二把小提琴中的一两条注释可能与第一把小提琴的修改版本不符。。CSV注释至少为

测试XLS文件：

这还不包括XLSX文件，但使用它们的示例应该很容易调整它们。

js XLSX库使将Excel/CSV文件转换为JSON对象变得很容易

从下载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到JSON演示
/*设置XMLHttpRequest*/
变量url=”http://myclassbook.org/wp-content/uploads/2017/12/Test.xlsx";
var oReq=新的XMLHttpRequest（）；
open（“GET”，url，true）；
oReq.responseType=“arraybuffer”；
oReq.onload=函数（e）{
var arraybuffer=oReq.响应；
/*将数据转换为二进制字符串*/
var数据=新的Uint8Array（arraybuffer）；
var arr=新数组（）；
对于（var i=0；i！=data.length；++i）arr[i]=String.fromCharCode（data[i]）；
var bstr=arr.join（“”）；
/*调用XLSX*/
变量工作簿=XLSX.read（bstr{
类型：“二进制”
});
/*在这里用工作簿做些什么*/
var first_sheet_name=workbook.SheetNames[0]；
/*获取工作表*/
var工作表=工作簿.工作表[第一张工作表名称]；
console.log（XLSX.utils.sheet）到json（工作表{
真的吗
}));
}
oReq.send（）；
输入：

输出：
答案在xls格式下运行良好，但在我的例子中，它在xlsx格式下不起作用。因此，我在这里添加了一些代码。它同时适用于xls和xlsx格式

我从官员那里取了样品

希望能有帮助

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);
}
@王振康非常感谢王振康！我发现这个解决方案是有效的，非常有帮助，它真的节省了我的一天。 对于我来说，我试图创建一个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的信息，我发现这个博客很有帮助：

如果你不提供自己的代码/示例/尝试，SOF上的人不会只给你代码。。作为提示，使用PHP将文件读入数组，然后使用json_encode…使用Javascript将其转换为客户端是最佳选择吗？我只想使用Javascript。我没有自己的代码，我只是从SheetJS中获取代码并尝试进行操作，但不适合。所以我正在寻找直接的javascript代码嗯，给我几分钟时间，我会看看我能为你做些什么更新并添加了第二个示例来演示如何生成表格不幸的是，我尝试了小提琴，但在上传excel表格后它什么也没做。尝试使用这个文件：因为它是我正在测试的文件，这是他们演示页面上的建议。你能检查一下你的浏览器控制台中的js错误吗？你使用的是什么浏览器？是的，它可以工作。很抱歉，我上载了错误的文件。我想我在这里给了你足够多的帮助，如果你需要更多的帮助，我会推荐一些教程和一些基础知识。很好，但问题是上载Excel文件。他没有指定是要在客户端还是服务器上转换它。您的示例是从服务器下载Excel文件。不错，但问题是上载Excel文件。他没有指定是要在客户端还是服务器上转换它。您的示例是从服务器下载Excel文件。实际上我正在寻找此解决方案，但是如何将json数据打印到html正文中？ 
<input
  accept=".xlsx"
  type="file"
  onChange={this.fileReader}
/>