How do i display data from excel to html?

In this tutorial you can find how to read excel file using JavaScript and display excel sheet data on web page in HTML table format using JavaScript. In previous, one of our tutorial, in which we have already seen how to convert HTML table data into Excel file by using SheetJS library. Now in this tutorial also we will use SheetJS JavaScript library and by using JavaScript library, we will convert Excel file data to HTML table and display on web page. Here under this tutorial, we will not use jQuery and Ajax server side script for fetch data from excel and display on web page. Now lets start seeing it!

First we have to include Bootstrap Stylesheet and SheetJS library link at header of our HTML page.

After this under this HTML page, we have to create one file tag for select file excel from local computer.

And below this file, we have to create one division tag for display excel sheet data on web page in HTML table format.

Next we have to move on write JavaScript code, so first store file tag property under one variable.

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

Next we have to write javascript code on change event, so when user have select file from local computer using file tag, then javascript code must be execute.

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

});

Under this change event code first we want to check selected file format is .xls or .xlsx. If selected file is not excel file then it will display error on web page, and if select file is excel then it will proceed for display excel file data on web page.

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

        excel_file.value = '';

        return false;
    }

After check validation error, now read the file using FileReader object. Here file must be read ads ArrayBuffer by pass the file object using event.target.files[0].

var reader = new FileReader();

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

IF the selected file is proper excel file then we need to convert what we have got from FileReader object to Unit8Array object by passing Filereader result into Unit8Array constructor.

var data = new Uint8Array(reader.result);

Next we have pass this Unit8Array data in SheetJS read() function, and it will return selected excel workbook object.

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

After getting workbook object, next we have to get sheet name of selected excel file. So here SheetNames variable will return sheet name in array format.

var sheet_name = work_book.SheetNames;

Once we have get sheet name, now we want to get first sheet data in JSON format, so this we can get by SheetJS sheet_to_json() function by passing workbook first sheet name.

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

Once we have get first sheet data in JSON format, next we have to simply write JavaScript code and convert that JSON data into HTML format and display under division tag wih id excel_data. So it will display excel file data on web page in HTML table format.

        if(sheet_data.length > 0)
        {
            var table_output = '';

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

                table_output += '';

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

                    if(row == 0)
                    {

                        table_output += '';

                    }
                    else
                    {

                        table_output += '';

                    }

                }

                table_output += '';

            }

            table_output += '
'+sheet_data[row][cell]+'
'+sheet_data[row][cell]+'
';

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

So once you have follow all above steps then you can check ouput in browser. So when we have select excel file then it will display excel sheet data on web page in HTML table format without refresh of web page. So in this tutorial, we have seen how to convert Excel file to HTML table at client-side by using SheetJS JavaScript library at client-side. Below you can find complete source code.

Full Source Code

	
	
	
    

    


    

    	
Convert Excel to HTML Table using JavaScript
    	

    		
Select Excel File
    		

    			
                

    		
    	
        

    

How do I display data from Excel table in HTML?

How do I populate data from Excel to HTML?