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

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

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

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

Next, we need to write the JavaScript code on the change event, so when the user has selected a file from the local computer using the file tag, the JavaScript code should be executed.

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

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

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

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

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

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

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

So once you have followed all the above steps then you can check output in the browser. So when we have selected an excel file then it will display excel sheet data on the web page in HTML table format without a refresh of the web page. So in this tutorial, we have seen how to convert Excel files to HTML tables at the client-side by using the SheetJS JavaScript library at the client-side. You can find the complete source code here.

The post How to Display Excel Data in HTML Table using JavaScript? appeared first on scmGalaxy.