Comment analyser un fichier Excel (XLS) en Javascript/HTML5 ?

Question

Je suis capable de lire un fichier Excel via FileReader mais il sort du texte ainsi que des caractères bizarres avec. J'ai besoin de lire xls par ligne, lire les données dans chaque colonne et les convertir en JSON.

Comment lire un fichier xls ligne par ligne ?

Answer 1

La fonction ci-dessous convertit les données de la feuille Excel (format XLSX) en JSON. Vous pouvez ajouter une promesse à la fonction.

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

Le post ci-dessous contient le code pour le format XLS Code javascript Excel vers JSON ?

Answer 2

Vieille question, mais je dois noter que la tâche générale d'analyser des fichiers XLS à partir de javascript est fastidieuse et difficile, mais pas impossible.

J'ai des parsers de base implémentés en JS pur :

• http://oss.sheetjs.com/js-xls/ (fichiers XLS, ce que vous vouliez)
• http://oss.sheetjs.com/js-xlsx/ (fichiers XLSX/XLSM/XLSB)

Les deux pages sont des analyseurs XLS/XLSX pilotés par l'API de fichier HTML5 (vous pouvez glisser-déposer votre fichier et il imprimera les données dans les cellules dans une liste séparée par des virgules). Vous pouvez également générer des objets JSON (en supposant que la première ligne est une ligne d'en-tête).

La suite de tests http://oss.sheetjs.com/ montre une version qui utilise XHR pour obtenir et analyser les fichiers.

Answer 3

Télécharger un excel file ici et vous pouvez obtenir les données dans JSON format en 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>

Il s'agit d'une combinaison des éléments suivants Stackoverflow postes :

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

Bonne chance...

Answer 4

Ce code peut vous aider
La plupart du temps, jszip.js ne fonctionne pas. Incluez donc xlsx.full.min.js dans votre code js.

Code 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]);
    };

Answer 5

Si vous voulez le moyen le plus simple et le plus petit de lire un fichier *.xlsx dans un navigateur, cette bibliothèque peut faire l'affaire :

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.
  })
})

Dans l'exemple ci-dessus data est une chaîne de données brute. Elles peuvent être analysées en JSON avec un schéma strict en passant le paramètre schema argument. Voir la documentation de l'API pour un exemple de cela.

Documents sur l'API : http://npmjs.com/package/read-excel-file