1

I have an excel file that contains data. I want to read that file and display the results in html / web page using JS or Angular JS.

Clever Programmer
  • 606
  • 7
  • 22
Nitin Agarwal
  • 943
  • 1
  • 13
  • 26
  • Please provide more information, the code you are using right now etc. – lisa p. Jan 18 '16 at 10:45
  • SO is not for providing the tutorials. SO is to help with errors and bugs. – Kunal Kakkad Jan 18 '16 at 10:47
  • 1
    Possible duplicate of [Read local xls/xlsx file in javascript](http://stackoverflow.com/questions/29465930/read-local-xls-xlsx-file-in-javascript) – Kunal Kakkad Jan 18 '16 at 10:49
  • that what i need, i have data in excel file and want to get those one by one. but not able to understand that. I know from data base but need from excel file – Nitin Agarwal Jan 18 '16 at 11:00

4 Answers4

3

A very simple way of reading an *.xslx file in a browser:

(displaying the results in html / web page using JS or Angular JS is trivial after that, though I'd suggest React over Angular)

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

In the example above data is raw string data. It can be parsed to JSON with a strict schema by passing schema argument. See API docs for an example of that.

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

catamphetamine
  • 4,489
  • 30
  • 25
1

SheetsJS/js-xlsx Github repository is designed for working with XLSX files in web development. This would be really useful for you. Read up on this and learn how to use it, no need to reinvent the wheel either. Good luck.

Clever Programmer
  • 606
  • 7
  • 22
  • one problem I discovered with this library is it does not read **formatting** information of the cells in excel file. so if you are using this library to pipe some excel file created elsewhere through it to convert it to html table, formatting info will be lost. https://gist.github.com/SheetJSDev/24b8acd317d01999d721b38de7c53021 – Akshay Mar 02 '23 at 16:04
0

JsZip did this very efficently. Take a look at it. And refer link to read local file using JSZip, you can then need to process to get the data in the excel file. Digging through the help documents will let you know how to do so.

Madhu
  • 2,416
  • 3
  • 15
  • 33
  • `jszip` is a library for creating/reading/editing zip files. It is true that a xlsx file is a zip file, but `jszip` is not enough to get a xlsx sheet as a Javascript array or object. – Stéphane Laurent Feb 01 '17 at 19:51
  • `jszip` actually enables one to decompress an XLSX file as shown in https://github.com/catamphetamine/read-excel-file – catamphetamine Mar 23 '18 at 23:42
0

Try this

<html>
<head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
        <div class="card">
            <div class="card-header"><b>Select Excel File</b></div>
            <div class="card-body">
                
                <input type="file" id="excel_file" />

            </div>
        </div>
        <div id="excel_data" class="mt-5"></div>
    </div>
</body>
</html>

<script>

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

    if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

        excel_file.value = '';

        return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event){

        var data = new Uint8Array(reader.result);

        var work_book = XLSX.read(data, {type:'array'});

        var sheet_name = work_book.SheetNames;

        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table table-striped table-bordered">';

            for(var row = 0; row < sheet_data.length; row++)
            {

                table_output += '<tr>';

                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {

                    if(row == 0)
                    {

                        table_output += '<th>'+sheet_data[row][cell]+'</th>';

                    }
                    else
                    {

                        table_output += '<td>'+sheet_data[row][cell]+'</td>';

                    }

                }

                table_output += '</tr>';

            }

            table_output += '</table>';

            document.getElementById('excel_data').innerHTML = table_output;
        }

        excel_file.value = '';

    }

});

</script>
Elhabchi
  • 11
  • 2