我怎样才能将本地Excel文件数据传递给Javascript数组(谷歌图表)?

我有一个简单的问题,但我找不到一个简单的解决scheme:

我有一个Excel文件(总是一样的),有几个非IT同事希望能够更新的WorkSheet,以便它也更新Google Charts(或其他图表API,你可以告诉我)网页。

(顺便说一下,我只需要每个工作表的某个部分,所以如果你知道一个方法来提取我所需要的东西,那就太好了:))

我想避免在服务器端的操作,但也许是不可能的,因为我想读取本地文件。

我已经看过转换为JSON的方式,或者使用xlsx.js加载为base64string,但我发现没有什么简单的事情可以让我的同事轻松使用。

非常感谢你。

编辑

我find了一种方法来完成我想要的东西,如果它能帮助任何人:

首先,我将所有需要的数据放在一个csv文件中。

然后,我使用HTML5 FileAPI来读取我用文件input加载的csv文件。

最后,我用一个cvstojson脚本parsing文件,然后按照我想要的方式将它传递给Google图表dataTable。

然而,这只允许加载数据一次,所以我使用了一个button样式的文件input标签,在加载文件之后触发了一个隐藏的“重置”button(实际上是克隆而不是重置),现在看起来像一个button允许多次加载文件后我改变了它的数据。 我也用jQuery的localStorage填充我的JSON。 我知道这很麻烦,所以这是一个代码解压缩:

<div id="load"> <button id="clear">Clear</button> <label id="forcvs" for="cvs" > Load data </label> <input type="file" id="cvs" onchange="handleFiles(this.files);" accept=".csv"><br/> </div> 

“handleFiles”function导致cvstojson脚本:

 var json = JSON.parse(localStorage.getItem('json')) function handleFiles(files) { // Check for the various File API support. if (window.FileReader) { // FileReader are supported. getAsText(files[0]); } else { alert('FileReader are not supported in this browser.'); } } function getAsText(fileToRead) { var reader = new FileReader(); // Read file into memory as UTF-8 reader.readAsText(fileToRead); // Handle errors load reader.onload = loadHandler; reader.onerror = errorHandler; } function loadHandler(event) { var csv = event.target.result; processData(csv); } function processData(csv) { object = $.csv.toObjects(csv, {separator:";"}) drawOutput(object); } function errorHandler(evt) { if(evt.target.error.name == "NotReadableError") { alert("Canno't read file !"); } } function drawOutput(object){ json = object localStorage.setItem('json', JSON.stringify(json)) drawChart() $( "#clear" ).trigger( "click" ); } 

然后在更新我的数据和绘制我的图表之前,我使用了:

 json = JSON.parse(localStorage.getItem('json')) 

这里是我使用的jquery的一个摘录:

 var load = $('#cvs') $('#clear').click(function () { load.replaceWith(load = load.clone(true)) }) 

而CSS:

 #cvs, #clear { display: none; } #forcvs { -webkit-appearance: button; -moz-appearance: button; appearance: button; line-height: 16px; padding: .2em .4em; margin: .2em; } 

希望它可以帮助一些人,谢谢你的回复:)

您可以尝试使用Alasql JavaScript库将XLSX数据加载到JavaScript数组中,而不需要任何复杂的编程。 Alasql使用XLSX.js库来处理Excel文件。

这是一个示例:

 <script src="alasql.min.js"></script> <script src='xlsx.core.min.js'></script> <script> alasql('select * from xlsx("cities.xlsx",{headers:true, sheetid:"Sheet1", range:"A1:B6"})', [],function(data) { console.log(data); }); </script> 

你可以在alasql.org网站上运行这个示例 。

默认情况下,标题选项为false,sheetid为“Sheet1”,范围为表单上的所有单元格。

Alasql还支持TXT,TAB,CSV,JSON和XLS格式。 您还可以从JavaScript数组中返回XLSX文件:

 var stars = [{star:"Aldebaran"},{star:"Algol"},{star:"Vega"}]; alasql('SELECT * INTO XSLX("stars.xlsx",{headers:true}) FROM ?',[stars]);