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

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

Answer 2

Merci pour la réponse ci-dessus, je pense que le champ d'application (des réponses) est complété mais je voudrais ajouter une "façon react" 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/> pour mettre les données dans leur propre état, vous pouvez accéder aux données Excel dans le "composant parent" en suivant la procédure suivante este :

Answer 3

readExcelFile = async ( file ) =>
{

    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer( file );

    fileReader.onload = ( e ) =>
    {
        const bufferArray = e.target.result;

        const wb = XLSX.read( bufferArray, { type: "buffer" } );

        const wsname = wb.SheetNames[ 0 ];

        const ws = wb.Sheets[ wsname ];

        const data = XLSX.utils.sheet_to_json( ws );
        console.log(data);
    };

};
            <input type="file" name="excelfile" id="excelfile"  readExcelFile(file)>

Answer 4

Si vous vous demandez comment lire un fichier depuis le serveur, ce code peut vous être utile.

Restrictions :

1. Le fichier doit se trouver sur le serveur (Local/Remote).

2. Vous devrez configurer les en-têtes ou avoir le plugin CORS de 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>

Answer 5

Inclure les fichiers xslx.js , xlsx.full.min.js , jszip.js

ajouter un gestionnaire d'événement onchange à l'entrée du 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);

}