javascript - 如何将本地 Excel 文件数据传递给 Javascript 数组(用于谷歌图表)？

Question

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

我有一个 Excel 文件(始终相同)，其中包含几个非 IT 同事希望能够更新的工作表，以便它也更新 Google 图表(或您可以建议我的其他图表 API)网页。

(顺便说一句，我只需要每个工作表的特定部分，所以如果你知道一种方法来只提取我需要的部分，那就太好了:))

我想避免进行服务器端操作，但这可能是不可能的，因为我想读取本地文件。

我已经研究过使用 xlsx.js 转换为 JSON 或加载为 base64 字符串的方法，但我发现没有什么简单的方法可以让我的同事轻松使用。

非常感谢。

编辑

我找到了一种方法来做我想做的事情，所以如果它可以帮助任何人:

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

然后，我使用 HTML5 FileAPI 读取通过文件输入加载的 csv 文件。

最后，我使用 cvstojson 脚本解析文件，然后按照我想要的方式将其传递给 google graph dataTable。

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

希望它能帮助到一些人，感谢您的回复:)

Answer 1

你可以试试Alasql无需任何复杂编程即可将 XLSX 数据加载到 JavaScript 数组的 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>

您可以运行 this sample在 alasql.org 网站。

默认情况下，headers 选项为 false，sheetid 为“Sheet1”，范围 - 工作表上的所有单元格。

Alasql 还支持 TXT、TAB、CSV、JSON 和 XLS 格式。您还可以生成 XLSX 文件 来自 JavaScript 数组:

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