Wie kann ich lokale Excel-Datei Daten an Javascript-Array übergeben (für Google-Diagramme)?

Question

Ich habe ein einfaches Problem, aber ich kann keine einfache Lösung finden:

Ich habe eine Excel-Datei (immer die gleiche), mit mehreren Arbeitsblättern, die Nicht-IT-Mitarbeiter in der Lage sein, zu aktualisieren, so dass es auch aktualisiert die Webseite von Google Charts (oder eine andere Diagramm-API, die Sie mir empfehlen können).

(By the way, ich brauche nur einen bestimmten Teil jedes Arbeitsblatt so, wenn Sie einen Weg wissen nur zu extrahieren, was ich brauche das wäre toll :))

Ich möchte mit Server-Seite vermeiden Operation, aber es ist vielleicht nicht möglich, da ich eine lokale Datei lesen möchte.

Ich habe nach Möglichkeiten gesucht, zu JSON zu konvertieren, oder als base64-String zu laden, mit xlsx.js, aber ich finde nichts einfaches, dass meine Kollegen leicht verwenden könnten.

Vielen Dank.

bearbeiten

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

Zuerst habe ich alle Daten habe ich in einer CSV-Datei benötigt.

Dann habe ich HTML5 FileAPI verwendet, um die CSV-Datei zu lesen, die ich mit einer Dateieingabe geladen habe.

Schließlich habe ich ein cvstojson-Skript verwendet, um die Datei zu parsen und dann an google graph dataTable zu übergeben, so wie ich es wollte.

Dies erlaubt jedoch, die Daten nur einmal zu laden, so dass ich eine Taste-Stil-Label für die Dateieingabe verwendet, die eine versteckte "Reset" -Taste ausgelöst (tatsächlich Klonen mehr als Zurücksetzen), nachdem die Datei geladen wurde, so jetzt es aussieht wie eine einzelne Taste, die es ermöglicht, die Datei mehrmals zu laden, nachdem ich die Daten darin geändert habe. Ich verwendete auch jQuery localStorage, um meine JSON zu füllen. Ich weiß, das ziemlich chaotisch ist also hier ist ein Code-Extrakt:

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

Die „handleFiles“ fonction zum cvstojson Skript führt:

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 meiner Daten zu aktualisieren und meine Grafik Zeichnung habe ich :

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

Hier ist ein Auszug aus dem jquery ich dafür verwendet:

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

Und die CSS:

#cvs, #clear { 
    display: none; 
} 


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

Hoffe, dass es etwas ein und danke für die Antworten :)

Answer 1

helfen Sie Alasql ohne aufwändige Programmierung JavaScript-Bibliothek können versuchen, zu XLSX Daten in JavaScript-Array zu laden. Alasql verwendet XLSX.js-Bibliothek, um mit Excel-Dateien zu arbeiten.

Dies ist ein Beispiel:

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

Sie this sample bei alasql.org Website ausführen können.

Standardmäßig Header-Option ist falsch, Blatt-ID ist "Sheet1", Bereich - alle Zelle auf dem Blatt.

Alasql unterstützt auch TXT-, TAB-, CSV-, JSON- und XLS-Formate. Sie können auch produzieren XLSX zurück von JavaScript-Array-Datei:

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