Excel to HTML Table | Javacodepoint

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Fill data in HTML form with Excel sheet from Chrome Extension.

License

ctechhindi/Fill-Excel-Data-on-HTML-Form

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Fill Excel Sheet Data into HTML Online Forms

Fill data in HTML form with Excel sheet from Chrome Extension.

• Fill Automatic Excel Sheet Data in the Online Form
• Automatic Generate Excel Sheet according to form fields
• Send Request (GET/POST/..) for Insert Entry
• Select the fields that depend on another field.
• Change the format of any date and fill it in the form.
• Run javascript event any field.
• Automatic click form submit button
• Insert custom javascript in the form fields
• Provide Toolbar
• Extension Context Menu Option.
• Hide JS Alert Message.
• and more..

• NEW: error_messages : If the error message matches while filling the entry, then the entry will skip and the error will be added to the Excel sheet. [Entry Error Message — ] .

• NEW: Save Entry Response Message Data in the Excel Sheet [Entry Response Message — ].
  • Custom Key save_response_message
  • FIXED: Checkbox element not show in the generate excel sheet.
  • FIXED: Form field radio button event not run selected radio element.
  • NEW: This Version Form Filler Script Run On Page Load.
  • NEW: Hide JS Alert Message. Hide Option Available in the Application Settings.
  • NEW: Timeout Feature Before and After
  • NEW: Add Option in the Extension Context Menu
    • Copy Select Box Selected Option Name
    • Copy Select Box Selected Option Value
    • page_loaded
    • form_filled
    • fill_action
    • element_exists
    • background_response
    • entry_saved

    📝 Copyright and License copyright

    Code copyright 2021 ctechhindi. Code released under the MIT license.

    About

    Fill data in HTML form with Excel sheet from Chrome Extension.

    Источник

    Display Excel data in HTML Table using SheetJS in JavaScript

    This article shows you how you display the Excel data in an HTML table using SheetJS in Javascript. SheetJS is a javascript library used to work with various spreadsheet formats. In another article, we explained Converting Excel file data to JSON using the SheetJS library in Javascript. Today in this article, we will explain how to display Excel spreadsheet data in an HTML table using javascript.

    Here first we convert the Excel data into JSON format then JSON data will be shown in HTML tabular format. Let’s see how it can be done.

    SheetJS Library

    SheetJS is a powerful library written in pure Javascript. It is a Parser and writer for various spreadsheet formats.

    How to use SheetJS?

    As it is a javascript library, we have to include it in the HTML document to use this library. There are various CDN links that can be used to include it. Let’s see one of the CDN links below:

    Library:	xlsx.min.js
    CDN Link:	https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js

    Now let’s see the below script that we have to include in the tag of the HTML document,

    How to display Excel data in HTML Table using Javascript?

    Follow the below steps to display excel data in the HTML table:

    1. Define HTML
    2. Includes the SheetJS library
    3. Write the Javascript logic to upload and validate the Excel file
    4. Read the Excel data into JSON format
    5. Convert JSON data to the HTML table

    1. Define HTML

    Let’s define the below HTML code in an HTML document file:

    Upload an excel file to display in HTML Table

    Upload

    2. Includes the SheetJS library

    Include the CDN link of library xlsx.min.js in the tag of an HTML file as follows:

    3. Write the Javascript logic to upload and validate the Excel file

    We will define a javascript upload() method to upload and validate the Excel file. The upload() method will allow users to upload a valid Excel file only. Let’s see the below logic that we have to write in tag:

    // Method to upload a valid excel file function upload() < var files = document.getElementById('file_upload').files; if(files.length==0)< alert("Please choose any file. "); return; >var filename = files[0].name; var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase(); if (extension == '.XLS' || extension == '.XLSX') < //Here calling another method to read excel file into json excelFileToJSON(files[0]); >else < alert("Please select a valid excel file."); >>

    4. Read Excel file in Javascript and convert it into JSON format

    We have defined a javascript method excelFileToJSON() that will read the Excel file and convert the data into JSON format. Inside excelFileToJSON() , we have read the data of the Excel file by using a file reader as a binary string using readAsBinaryString() method. After that, we used XLSX which has a built-in facility to convert our binary string into a JSON object. And the XLSX.utils.sheet_to_json() method is used to read sheet data in JSON.

    //Method to read excel file and convert it into JSON function excelFileToJSON(file)< try < var reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = function(e) < var data = e.target.result; var workbook = XLSX.read(data, < type : 'binary' >); var result = <>; var firstSheetName = workbook.SheetNames[0]; //reading only first sheet data var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]); alert(JSON.stringify(jsonData)); //displaying the json result into HTML table displayJsonToHtmlTable(jsonData); > >catch(e) < console.error(e); >>

    5. Convert JSON data to the HTML Table using Javascript

    Now we have defined a javascript method displayJsonToHtmlTable() to display the JSON data in an HTML table.

    //Method to display the data in HTML Table function displayJsonToHtmlTable(jsonData)< var table=document.getElementById("display_excel_data"); if(jsonData.length>0)< var htmlData='Student NameAddressEmail IDAge'; for(var i=0;i'+row["Address"] +''+row["Email ID"]+''+row["Age"]+''; > table.innerHTML=htmlData; >else < table.innerHTML='There is no data in Excel'; >>

    Display Excel data in HTML Table [complete example]

    This example shows you Excel to HTML table Conversion. Let’s see the complete code below (putting all the above code in a single HTML file):

           
    Upload an excel file to display in HTML Table
      Upload 
     
         

    Test and Live Demo

    Let’s assume a sample Excel file(students.xlsx) that we are going to upload. As you can see in the below image this Excel file contains the student’s data(name, address, email id, and age).

    

    Let’s see the result once we upload the above Excel file to this application.

    

    Conclusion

    In this tutorial, you have seen how you display the Excel file data in an HTML Table using Javascript. You have seen here, that can be easily done by using the SheetJS library. As you have seen this library has the capability to convert binary strings to JSON format that is used here to display in an HTML table.

    Related articles:

    Источник

    Webslesson

    PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

    Monday, 26 July 2021

    How to Display Excel Data in HTML Table using JavaScript

    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, ); 

    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]], ); 

    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
     
     
     
     
         

    Источник

    Читайте также:  Вычисления квадратного корня php