Reading excel file in Reactjs

Question

I am trying and banging my head already while trying to read excel file in Reactjs.

I have tried multiple libraries out there like, Sheetjs , excel-parser, exceljs and so on (like 8-9) libraries.

I am getting weird and different errors in every library.

For example i am using excel-parser and getting following error

Module not found: 'child_process'

That is because it is a node module and won't work in browser.

Anyone know some good and easy library that can work with reactjs in browser?

Solution 1

I have successfully read excel file using Sheetjs's npm version xlsx.

Here is code:

import * as XLSX from 'xlsx';
//f = file
var name = f.name;
const reader = new FileReader();
reader.onload = (evt) => { // evt = on_file_select event
    /* Parse data */
    const bstr = evt.target.result;
    const wb = XLSX.read(bstr, {type:'binary'});
    /* Get first worksheet */
    const wsname = wb.SheetNames[0];
    const ws = wb.Sheets[wsname];
    /* Convert array of arrays */
    const data = XLSX.utils.sheet_to_csv(ws, {header:1});
    /* Update state */
    console.log("Data>>>"+data);
};
reader.readAsBinaryString(f);

Solution 2

Noman Ali! Thank you.
I used, this code

const handleUpload = (e) => {
    e.preventDefault();

    var files = e.target.files, f = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        let readedData = XLSX.read(data, {type: 'binary'});
        const wsname = readedData.SheetNames[0];
        const ws = readedData.Sheets[wsname];

        /* Convert array to json*/
        const dataParse = XLSX.utils.sheet_to_json(ws, {header:1});
        setFileUploaded(dataParse);
    };
    reader.readAsBinaryString(f)
}

Solution 3

I find xlsx to work pretty well. xlsx Package

Comments

[Noman Ali]

Could you please answer this then> stackoverflow.com/questions/46911079/…

[steve]

but i have a doubt in this. how to restrict the brows file should be only .xlsx format. Other files should allow to upload

[RyanDay]

how are you getting the file? Do you have to use a require with excel-loader?

[Miguel Luisillo]

Here is the repo demo for react github.com/SheetJS/sheetjs/tree/…

[Konrad Grzyb]

For me there is a problem that if there is empty cell there is no column key and value in data at all and I expect to be like { colName: null }