This gist contains basic code to read .xlsx from the server with XMLHttpRequest method and then storing it in variable to allow searching in stored data.
For XLSX file parsing I'm using SheetJs/sheetjs library.
Last active
December 15, 2019 17:31
-
-
Save silencesys/526778bf13924c0baf16171fbc3f8295 to your computer and use it in GitHub Desktop.
Read XLSX file in JavaScript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>JavaScript Reads Excel</title> | |
| <style> | |
| body { | |
| background-color: darkslategrey; | |
| color: whitesmoke; | |
| } | |
| </style> | |
| <!-- necessary javascript libraries --> | |
| <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="jrex--results"> | |
| <input type="text" id="jrex--input"> | |
| <p id="jrex--output">Type into input and hit enter to find something.</p> | |
| </div> | |
| <script> | |
| const jrexInput = document.getElementById('jrex--input') | |
| jrexInput.addEventListener('change', jrexInputChanged) | |
| const jrexOutput = document.getElementById('jrex--output') | |
| // Set custom key if the file is structured to array of objects | |
| let jrexKeyName = 'id' | |
| // This variable will contain xlsx data | |
| let jrexXlsData = [] | |
| // Change url | |
| jrexInitialize('http://laboratory.localhost/javascript-reads-excel/bosworth.xlsx') | |
| /** | |
| * Initialize JREX and load XLS file from the specified URL. | |
| * | |
| * @param {String} url | |
| * @return void | |
| */ | |
| function jrexInitialize(url) { | |
| const jrexRequestXlsFile = new XMLHttpRequest() | |
| jrexRequestXlsFile.open('GET', url, true) | |
| jrexRequestXlsFile.responseType = 'arraybuffer' | |
| jrexRequestXlsFile.onload = function (e) { | |
| const jrexRequestData = new Uint8Array(jrexRequestXlsFile.response) | |
| const jrexWorkbook = XLSX.read(jrexRequestData, { type: 'array' }) | |
| jrexWorkbook.SheetNames.forEach(function (sheetName) { | |
| jrexXlsData = XLSX.utils.sheet_to_row_object_array(jrexWorkbook.Sheets[sheetName]) | |
| }) | |
| } | |
| jrexRequestXlsFile.send() | |
| } | |
| /** | |
| * Handle jrex input change. | |
| * | |
| * @param {DomEvent} e | |
| * @return void | |
| */ | |
| function jrexInputChanged(e) { | |
| const jrexInputValue = e.target.value | |
| let jrexFinds = jrexXlsData.find(item => item[jrexKeyName].toString() === jrexInputValue) | |
| if (jrexFinds !== undefined) { | |
| jrexOutput.innerText = JSON.stringify(jrexFinds) | |
| // Logic | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment