Wie kann ich pass den lokalen Excel-Datei Daten in Javascript-array (für die google-charts)?

Ich habe ein einfaches problem, aber ich kann nicht finden, eine einfache Lösung:

Ich habe eine Excel-Datei (immer die gleiche) mit mehreren Arbeitsblättern, die nicht-IT-Mitarbeiter möchten in der Lage sein zu aktualisieren, so dass es auch die updates der Google Charts (oder anderen chart-API können Sie mir raten) Webseite.

(By the way, ich brauche nur einen bestimmten Teil der einzelnen Arbeitsblätter, so dass, wenn Sie wissen, einen Weg zu extrahieren, nur das, was ich brauche, das wäre toll 🙂 )

Ich würde gerne vermeiden, dass server-side-Betrieb, aber es ist vielleicht nicht möglich, da ich möchte, das Lesen einer lokalen Datei.

Ich sah Sie an Möglichkeiten, um zu konvertieren, JSON, oder laden als base64-string, mit xlsx.js aber ich finde einfach nichts, dass meine Kollegen konnten problemlos nutzen.

Danke Ihnen sehr.

Bearbeiten

Ich einen Weg gefunden, genau das zu tun, was ich wollte, also, wenn es kann jemand helfen:

Zuerst lege ich alle Daten die ich brauchte in eine csv-Datei.

Dann verwendete ich die HTML5-FileAPI zum Lesen der csv-Datei, die ich geladen habe mit einem Datei-Eingang.

Schließlich habe ich eine cvstojson Skript zum Parsen der Datei dann übergeben Sie es an th google Diagramm-Datentabelle, wie ich wollte.

Aber dieser laden darf die Daten nur einmal so habe ich ein button-Stil-label für die Datei-Eingabe ausgelöst hat, eine verborgene Taste "reset" (eigentlich Klonen mehr als zurücksetzen) nachdem die Datei geladen wurde, so dass es jetzt aussieht wie eine einzelne Schaltfläche, die ermöglicht, um die Datei zu laden, die mehrere Male, nachdem ich die Daten geändert.
Ich habe auch die jQuery localStorage zum Auffüllen meiner json.
Ich weiß, das ist ziemlich chaotisch, so dass hier ein code-Auszug:

<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" fonction führt zu der cvstojson Skript:

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

und dann vor dem Update meine Daten und Zeichnung meiner Karte die ich verwendet habe:

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

Hier ist ein Auszug aus dem jquery habe ich verwendet:

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

Und CSS:

#cvs, #clear {
  display: none;
}


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

Hoffe, es kann einigen helfen einem und vielen Dank für die Antworten 🙂

InformationsquelleAutor CyrilFind | 2014-07-02