code-boxx/0-JS-EXCEL-TABLE.MD

## 0-JS-EXCEL-TABLE.MD

      
    Raw
  

              0-JS-EXCEL-TABLE.MD
            
          
    JAVASCRIPT DISPLAY EXCEL FILE IN HTML TABLE


https://code-boxx.com/javascript-excel-html-table/
https://www.youtube.com/watch?v=zAj_iENS6Rs

NOTES

Gist does not allow Excel files. Convert 1-users.csv to 1-users.xlsx on your own.
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-users.csv

          
            NAME
            EMAIL

            
              Jo Doe
              jo@doe.com

            
              Job Doe
              job@doe.com

            
              Joe Doe
              joe@doe.com

            
              Jog Doe
              jog@doe.com

            
              Joh Doe
              joh@doe.com

            
              Joi Doe
              joi@doe.com

            
              Jol Doe
              jol@doe.com

            
              Jon Doe
              jon@doe.com

            
              Jou Doe
              jou@doe.com

            
              Joy Doe
              joy@doe.com

## 2-excel-table.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Excel</title>

    <!-- (X) NOT IMPORTANT -->
    <style>
    * { font-family: arial, sans-serif; }
    table { border-collapse: collapse; }
    table tr:nth-child(odd) { background: #f2f2f2; }
    table td { padding: 10px; }
    </style>

    <!-- (A) JAVASCRIPT -->
    <!-- https://sheetjs.com/ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script defer src="3-excel-table.js"></script>
  </head>
  <body>
    <!-- (B) FILE PICKER -->
    <input type="file" id="demoA" accept=".xls,.xlsx">

    <!-- (C) EMPTY TABLE -->
    <table id="demoB"></table>
  </body>
</html>

## 3-excel-table.js
document.getElementById("demoA").onchange = evt => {
  // (A) NEW FILE READER
  var reader = new FileReader();

  // (B) ON FINISH LOADING
  reader.addEventListener("loadend", evt => {
    // (B1) GET HTML TABLE
    var table = document.getElementById("demoB");
    table.innerHTML = "";

    // (B2) GET THE FIRST WORKSHEET
    var workbook = XLSX.read(evt.target.result, {type: "binary"}),
        worksheet = workbook.Sheets[workbook.SheetNames[0]],
        range = XLSX.utils.decode_range(worksheet["!ref"]);

    // (B3) READ EXCEL CELLS & INSERT ROWS/COLUMNS
    for (let row=range.s.r; row<=range.e.r; row++) {
      let r = table.insertRow();
      for (let col=range.s.c; col<=range.e.c; col++) {
        let c = r.insertCell(),
            xcell = worksheet[XLSX.utils.encode_cell({r:row, c:col})];
        c.innerHTML = xcell.v;
      }
    }
  });

  // (C) START - READ SELECTED EXCEL FILE
  reader.readAsArrayBuffer(evt.target.files[0]);
};
	NAME	EMAIL
	Jo Doe	jo@doe.com
	Job Doe	job@doe.com
	Joe Doe	joe@doe.com
	Jog Doe	jog@doe.com
	Joh Doe	joh@doe.com
	Joi Doe	joi@doe.com
	Jol Doe	jol@doe.com
	Jon Doe	jon@doe.com
	Jou Doe	jou@doe.com
	Joy Doe	joy@doe.com
	<!DOCTYPE html>
	<html>
	<head>
	<title>Javascript Excel</title>

	<!-- (X) NOT IMPORTANT -->
	<style>
	* { font-family: arial, sans-serif; }
	table { border-collapse: collapse; }
	table tr:nth-child(odd) { background: #f2f2f2; }
	table td { padding: 10px; }
	</style>

	<!-- (A) JAVASCRIPT -->
	<!-- https://sheetjs.com/ -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
	<script defer src="3-excel-table.js"></script>
	</head>
	<body>
	<!-- (B) FILE PICKER -->
	<input type="file" id="demoA" accept=".xls,.xlsx">

	<!-- (C) EMPTY TABLE -->
	<table id="demoB"></table>
	</body>
	</html>
	document.getElementById("demoA").onchange = evt => {
	// (A) NEW FILE READER
	var reader = new FileReader();

	// (B) ON FINISH LOADING
	reader.addEventListener("loadend", evt => {
	// (B1) GET HTML TABLE
	var table = document.getElementById("demoB");
	table.innerHTML = "";

	// (B2) GET THE FIRST WORKSHEET
	var workbook = XLSX.read(evt.target.result, {type: "binary"}),
	worksheet = workbook.Sheets[workbook.SheetNames[0]],
	range = XLSX.utils.decode_range(worksheet["!ref"]);

	// (B3) READ EXCEL CELLS & INSERT ROWS/COLUMNS
	for (let row=range.s.r; row<=range.e.r; row++) {
	let r = table.insertRow();
	for (let col=range.s.c; col<=range.e.c; col++) {
	let c = r.insertCell(),
	xcell = worksheet[XLSX.utils.encode_cell({r:row, c:col})];
	c.innerHTML = xcell.v;
	}
	}
	});

	// (C) START - READ SELECTED EXCEL FILE
	reader.readAsArrayBuffer(evt.target.files[0]);
	};