Come analizzare il file Excel in Javascript / HTML5


136

Sono in grado di leggere il file Excel tramite FileReaderma genera testo e caratteri strani con esso. Devo leggere il xlsfile in ordine di riga, leggere i dati in ogni colonna e convertirli in JSON.

Come leggere il file xls riga per riga?



1
@JoachimPileborg: questo non risponde alla domanda. Ho bisogno di leggere il file Excel riga per riga. Anche se posso leggerlo usando FileReader (HTML5) ma non riesco ancora a sfogliare le righe.
ducktyped il

Risposte:


104

La funzione sottostante converte i dati del foglio Excel (formato XLSX) in JSON. puoi aggiungere promessa alla funzione.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

Di seguito post ha il codice per il formato javascript da Excel a JSON in formato XLS ?


1
si blocca per file Excel di grandi dimensioni in Chrome, qualche buona soluzione per questo?
Zed,

Posso sapere quanto è grande il tuo file?
Perù,

6
e.target.result () dovrebbe essere e.target.result vedere developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
user227353

3
Per me, ho dovuto dichiarare la jszip.jssceneggiatura prima xlsx.js.
Florin Vîrdol,

1
Come posso assegnare json_object alla variabile pubblica e accedervi al di fuori del ciclo for?
Shardul

109

Vecchia domanda, ma dovrei notare che il compito generale di analizzare i file XLS da JavaScript è noioso e difficile ma non impossibile.

Ho parser di base implementati in JS puro:

Entrambe le pagine sono parser XLS / XLSX basati su API HTML5 (è possibile trascinare e rilasciare il file per stampare i dati nelle celle in un elenco separato da virgole). Puoi anche generare oggetti JSON (supponendo che la prima riga sia una riga di intestazione).

La suite di test http://oss.sheetjs.com/ mostra una versione che utilizza XHR per ottenere e analizzare i file.


4
Se potessi aggiungere del codice di esempio alla risposta, lo renderebbe molto meglio (aggiungi anche un diaclaimer se sei il capo delle biblioteche).
acdcjunior,


potremmo saltare alcune prime righe e colonne di xlsx con JS-XLSX?
maggio

19

Carica un excel filequi e puoi ottenere i dati in JSONformato in console:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    </script>

Questa è una combinazione di quanto segue Stackoverflow post:

  1. https://stackoverflow.com/a/37083658/4742733
  2. https://stackoverflow.com/a/39515846/4742733

In bocca al lupo...


14

Questo codice può aiutarti
La maggior parte delle volte jszip.js non funziona, quindi includi xlsx.full.min.js nel tuo codice js.

Codice HTML

 <input type="file" id="file" ng-model="csvFile"  
    onchange="angular.element(this).scope().ExcelExport(event)"/>

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>

$scope.ExcelExport= function (event) {


    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});

        wb.SheetNames.forEach(function(sheetName){
        var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
        var jsonObj = JSON.stringify(rowObj);
        console.log(jsonObj)
        })
    };
    reader.readAsBinaryString(input.files[0]);
    };

Che dire se voglio caricare anche le immagini nel foglio Excel
Mayur Agarwal

9

Se vuoi il modo più semplice e più piccolo di leggere un file * .xlsx in un browser, questa libreria potrebbe fare:

https://catamphetamine.github.io/read-excel-file/

<input type="file" id="input" />
import readXlsxFile from 'read-excel-file'

const input = document.getElementById('input')

input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((data) => {
    // `data` is an array of rows
    // each row being an array of cells.
  })
})

Nell'esempio sopra datasono dati stringa grezzi. Può essere analizzato su JSON con uno schema rigoroso passando schemaargomento. Consulta i documenti API per un esempio.

Documenti API: http://npmjs.com/package/read-excel-file


4

Grazie per la risposta sopra, penso che il campo di applicazione (delle risposte) sia completo, ma vorrei aggiungere un "modo di reazione" per chiunque utilizzi la reazione.

Crea un file chiamato importData.js:

import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
    constructor(props){
        super(props);
        this.state={
            excelData:{}
        }
    }
    excelToJson(reader){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        var data = {};
        wb.SheetNames.forEach(function(sheetName){
             var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
             var rowString = JSON.stringify(rowObj);
             data[sheetName] = rowString;
        });
        this.setState({excelData: data});
    }
    loadFileXLSX(event){
        var input = event.target;
        var reader = new FileReader();
        reader.onload = this.excelToJson.bind(this,reader);
        reader.readAsBinaryString(input.files[0]);
    }
    render(){
        return (
            <input type="file" onChange={this.loadFileXLSX.bind(this)}/>
        );
    }
}

Quindi è possibile utilizzare il componente nel metodo di rendering come:

import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
    render(){
        return (<importData/>);
    }
}

<ImportData/>imposta i dati sul proprio stato, è possibile accedere ai dati di Excel nel "componente padre" seguendo questo :


Penso che il tag nella dichiarazione di ritorno dovrebbe essere <ImportData/>invece di <importData/>. Sono abbastanza nuovo in React ma credo che i nomi dei componenti siano sempre in maiuscolo. In ogni caso, questo è il nome usato durante l'importazione nell'esempio.
rhaben,

3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    </script>


0

Se ti stai chiedendo come leggere un file dal server questo codice potrebbe essere utile.

Restrizioni:

  1. Il file dovrebbe essere nel server (locale / remoto).
  2. Dovrai configurare le intestazioni o avere il plug-in CORS google.

<Head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>

<body>
    <script>
    /* set up XMLHttpRequest */


    // replace it with your file path in local server
    var url = "http://localhost/test.xlsx";

    var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(e) {
        var arraybuffer = oReq.response;

        /* convert data to binary string */
        var data = new Uint8Array(arraybuffer);

        var arr = new Array();
        for (var i = 0; i != data.length; ++i) {
            arr[i] = String.fromCharCode(data[i]);
        }

        var bstr = arr.join("");

        var cfb = XLSX.read(bstr, { type: 'binary' });

        cfb.SheetNames.forEach(function(sheetName, index) {

            // Obtain The Current Row As CSV
            var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);

            fieldsObjs.map(function(field) {
                $("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
            });

        });
    }

    oReq.send();
    </script>
</body>
<div id="my_file_output">
</div>

</html>

0

include xslx.js, xlsx.full.min.js, jszip.js

aggiungere un gestore eventi onchange all'input del file

function showDataExcel(event)
{
            var file = event.target.files[0];
            var reader = new FileReader();
            var excelData = [];
            reader.onload = function (event) {
                var data = event.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });

                workbook.SheetNames.forEach(function (sheetName) {
                    // Here is your object
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                    for (var i = 0; i < XL_row_object.length; i++)
                    {
                        excelData.push(XL_row_object[i]["your column name"]);

                    }

                    var json_object = JSON.stringify(XL_row_object);
                    console.log(json_object);
                    alert(excelData);
                })

            };

            reader.onerror = function (ex) {
                console.log(ex);
            };

            reader.readAsBinaryString(file);

}

-4

XLS è un formato proprietario binario utilizzato da Microsoft. L'analisi di XLS con le lingue lato server è molto difficile senza utilizzare una libreria specifica o Office Interop. Farlo con JavaScript è una missione impossibile. Grazie all'API di file HTML5 puoi leggere i suoi contenuti binari ma per analizzarli e interpretarli dovrai immergerti nelle specifiche del formato XLS . A partire da Office 2007, Microsoft ha adottato i formati di file Open XML ( xslxper Excel), che è uno standard.


@ducktyped, non ne sono a conoscenza né ho visto alcun codice javascript che legge un file Excel binario.
Darin Dimitrov,

13
Missione impossibile? Ne dubito. Se siamo in grado di eseguire il kernel Linux in javascript sul lato client, dovrebbe essere possibile analizzare un file Excel binario. È solo che nessuno a mia conoscenza lo ha ancora fatto.
JP Richardson,

Ecco la documentazione per curiosi di MS xls struttura msdn.microsoft.com/en-us/library/office/...
DJRA

-5

var excel = new ActiveXObject ("Excel.Application"); var book = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.Sheets.Item (1); var value = sheet.Range ("A1");

quando hai il foglio. È possibile utilizzare le funzioni VBA come in Excel.


6
questo funziona solo con "il nostro caro amico" IE. E ho bisogno di usare HTML5. Devo solo sfogliare il contenuto del testo reale riga per riga.
ducktyped il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.