如何将本地Excel文件数据传递给Javascript数组（对于谷歌图表）？

Question

我有一个简单的问题，但我找不到一个简单的解决方案：

我有一个Excel文件（总是相同的），有几个非IT同事希望能够更新的WorkSheets，以便它还可以更新Google Charts（或其他图表API，你可以建议我）网页。

（顺便说一下，我只需要每个工作表的某个部分，所以如果你知道一种方法只提取我需要的东西那将是伟大的:)）

我想避免服务器端操作但是因为我想读取本地文件所以可能不可能。

我已经研究了使用xlsx.js转换为JSON或加载为base64字符串的方法，但我发现我的同事很容易使用它们。

非常感谢你。

Edit

如果它可以帮助任何人，我找到了一种完全符合我想要的方法：

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

然后，我使用html5 FileAPI来读取我用文件输入加载的csv文件。

最后，我使用cvstojson脚本来解析文件，然后按照我想要的方式将其传递给谷歌图形数据表。

但是，这只允许加载一次数据所以我在文件加载后使用按钮样式的标签来触发隐藏的“重置”按钮（实际上克隆的不仅仅是重置），所以现在它看起来像一个按钮允许在我更改其中的数据后多次加载文件。我还使用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>

“handle Files”函数导致csv到json脚本：

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

希望它可以帮助一些人，并感谢回复:)

Answer 1

另一答案