Excel到JSON的JavaScript代码？ [英] Excel to JSON javascript code?

问题描述

我想将Excel表格数据转换为json。它必须是动态的，所以有一个上传按钮，用户可以上传excel表格，然后将数据转换成json。你能否提供我的JavaScript代码？我尝试过SheetJS，但无法弄清楚。我更喜欢直截了当的事情）

我非常感谢您的帮助！

解决方案

注意：不是100％跨浏览器

您会发现人们对不常见的浏览器存在问题，可以归结为浏览器的版本..我总是推荐使用 caniuse 之类的东西来查看支持哪一代浏览器......这只是用户的一个工作答案，而不是最终的副本并贴上代码供人们使用。

The Fiddle： http://jsfiddle.net/d2atnbrt/3/

HTML代码：

 < input type =fileid =my_file_input/> 
< div id ='my_file_output'>< / div> 
  

JS代码：

  var oFileIn; 
 $ b $（函数（）{
 oFileIn = document.getElementById（'my_file_input'）; 
 if（oFileIn.addEventListener）{
 oFileIn.addEventListener（'change '，filePicked，false）; 
} 
}）; 
 
 
函数filePicked（oEvent）{
 //从输入中获取文件
 var oFile = oEvent.target.files [0]; 
 var sFilename = oFile.name; 
 //创建文件读取器HTML5 
 var reader = new FileReader（）; 
 
 //准备好当文件获取选定
时的事件reader.onload = function（e）{
 var data = e.target.result; 
 var cfb = XLS.CFB.read（data，{type：'binary'}）; 
 var wb = XLS.parse_xlscfb（cfb）; 
 //在每张图上循环
 wb.SheetNames.forEach（function（sheetName）{
 //获取当前行为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）
}）; 
}; 
 
 //告诉JS开始读取文件..如果需要可以延迟这个
 reader.readAsBinaryString（oFile）; 
} 
  

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

这是基本的，我可以得到它，

编辑 - 生成表格

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

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

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

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

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

I want to convert excel sheet data to json. It has to be dynamic, so there is an upload button where user uploads the excel sheet and the data is then converted into json. Could you please provide me the javascript code? I tried SheetJS but couldn't figure out. I would prefer something straight forward :)

I really appreciate your help!

解决方案

NOTE: Not 100% Cross Browser

as you will see people have had issues with the not so common browsers, But this could come down to the version of the browser.. I always recommend using something like caniuse to see what generation of browser is supported... This is only a working answer for the user, not a final copy and paste code for people to just use..

The Fiddle: http://jsfiddle.net/d2atnbrt/3/

THE HTML CODE:

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

THE JS CODE:

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);
}

This also requires https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.js to convert to a readable format, i've also used jquery only for changing the div contents and for the dom ready event.. so jquery is not needed

This is as basic as i could get it,

EDIT - Generating A Table

The Fiddle: http://jsfiddle.net/d2atnbrt/5/

This second fiddle shows an example of generating your own table, the key here is using sheet_to_json to get the data in the correct format for JS use..

One or two comments in the second fiddle might be incorrect as modified version of the first fiddle.. the CSV comment is at least

Test XLS File: http://www.whitehouse.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls

This does not cover XLSX files thought, it should be fairly easy to adjust for them using their examples.

这篇关于Excel到JSON的JavaScript代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！