Comment analyser un fichier Excel en Javascript / HTML5


136

Je suis capable de lire le fichier Excel via FileReadermais il génère du texte ainsi que des caractères étranges. J'ai besoin de lire le xlsfichier par ligne, de lire les données dans chaque colonne et de le convertir en JSON.

Comment lire un fichier xls ligne par ligne?



1
@JoachimPileborg: cela ne répond pas à la question. J'ai besoin de lire le fichier Excel ligne par ligne. Bien que je puisse le lire en utilisant FileReader (HTML5), mais toujours incapable de parcourir les lignes.
ducktyped

Réponses:


105

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>

L'article ci-dessous contient le code du format XLS Excel au code javascript JSON?


1
il plante pour les fichiers Excel plus volumineux dans chrome, une bonne solution pour cela?
Zed

Puis-je connaître la taille de votre fichier?
Pérou

6
e.target.result () doit être e.target.result voir developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
user227353

3
Pour moi, je devais déclarer le jszip.jsscript avant xlsx.js.
Florin Vîrdol

1
Comment puis-je affecter json_object à une variable publique et y accéder en dehors de la boucle for?
Shardul

109

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

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

Les deux pages sont des analyseurs XLS / XLSX pilotés par 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 des fichiers.


4
Si vous pouviez ajouter un exemple de code à la réponse, cela la rendrait beaucoup mieux (ajoutez également un diaclaimer si vous êtes le leader des bibliothèques).
acdcjunior

3
J'ai blogué à propos de ce psjinx.com/programming/2014/01/04/… :)
pankaj28843

pourrions-nous sauter quelques premières lignes et colonnes de xlsx avec JS-XLSX?
mayank

19

Téléchargez un excel fileici et vous pouvez obtenir les données au JSONformat 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>

Ceci est une combinaison des Stackoverflowmessages suivants :

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

Bonne chance...


14

Ce code peut vous aider
La plupart du temps, jszip.js ne fonctionne pas, alors incluez 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]);
    };

Et si je veux aussi télécharger des images dans une feuille Excel
Mayur Agarwal

9

Si vous voulez la manière la plus simple et la plus infime de lire un fichier * .xlsx dans un navigateur, cette bibliothèque pourrait faire:

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 data- dessus, il y a des données de chaîne brutes. Il peut être analysé en JSON avec un schéma strict en passant un schemaargument. Voir la documentation de l'API pour un exemple de cela.

Documentation de l'API: http://npmjs.com/package/read-excel-file


4

Merci pour la réponse ci-dessus, je pense que la portée (des réponses) est terminée mais je voudrais ajouter un "moyen de réaction" pour quiconque utilise react.

Créez un fichier appelé 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)}/>
        );
    }
}

Ensuite, vous pouvez utiliser le composant dans la méthode de rendu comme:

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

<ImportData/>définirait les données dans leur propre état, vous pouvez accéder aux données Excel dans le "composant parent" en suivant ceci :


Je pense que la balise dans la déclaration de retour devrait être <ImportData/>au lieu de <importData/>. Je suis assez nouveau dans React mais je pense que les noms des composants sont toujours en majuscules. Dans tous les cas, c'est le nom utilisé lors de l'importation dans l'exemple.
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

Si vous vous demandez comment lire un fichier à partir du serveur, ce code peut être utile.

Restrictions:

  1. Le fichier doit se trouver sur le serveur (local / distant).
  2. Vous devrez configurer les en-têtes ou avoir le plugin google CORS.

<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

inclure les xslx.js, xlsx.full.min.js, jszip.js

ajouter un gestionnaire d'événements onchange à l'entrée de fichier

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 est un format propriétaire binaire utilisé par Microsoft. L'analyse de XLS avec les langues côté serveur est très difficile sans utiliser une bibliothèque spécifique ou Office Interop. Faire cela avec javascript est une mission impossible. Grâce à l'API HTML5 File, vous pouvez lire son contenu binaire mais pour l'analyser et l'interpréter, vous devrez vous plonger dans les spécifications du format XLS . À partir d'Office 2007, Microsoft a adopté les formats de fichier Open XML ( xslxpour Excel) qui sont une norme.


@ducktyped, je ne suis pas au courant ni n'ai vu de code javascript qui lit un fichier Excel binaire.
Darin Dimitrov

13
Mission impossible? J'en doute. Si nous pouvons exécuter le noyau Linux en javascript côté client, il devrait être possible d'analyser un fichier Excel binaire. C'est juste que personne à ma connaissance ne l'a encore fait.
JP Richardson

Voici la documentation pour curieux de la structure ms xls msdn.microsoft.com/en-us/library/office
...

-5

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

lorsque vous avez la feuille. Vous pouvez utiliser les fonctions VBA comme vous le faites dans Excel.


6
cela ne fonctionne qu'avec "notre cher ami" IE. Et j'ai besoin d'utiliser HTML5. J'ai juste besoin de parcourir le contenu du texte réel ligne par ligne.
ducktyped
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.