Hello for every one: The today over lesson is about the Upload Parse Excel document to HTML, JavaScript Shadow DOM, how to creat or upload and parse excel document to html.

Upload and Parse Excel Document to HTML

// The code below uses following scripts, they are injected already:
// 1. https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.1/xlsx.full.min.js
// 2. https://cdnjs.cloudflare.com/ajax/libs/json2html/1.3.0/json2html/1.min.js

let fileInputEl;
let columnsEl;
let output;

window.onload = () => {
	fileInputEl = document.getElementById('file-btn');
	columnsEl = document.getElementById('columns');
	outputEl = document.getElementById('output');
	fileInputEl.addEventListener('change', onunload);
	
	function onUpload(event){
		const reader = new FileReader();
		const file = event.target.files[0];
		
		const columns = columnsEl.value.split(',').map(col => col.trim());
		const tableHeader = columns.map(col = > <th>${col}</th>).join('');
		outputEl.innerHTML = tableHeader;
		
		reader.onload = (e) => {
			const fileContent = e.target.result;
			const workbook = XLSX.read(file, { type: 'binary' });
			workbook.SheetNames.forEach(sheetname => {
				const data = XLSX.utils.sheet_to_row_object_array(workbook.sheets[sheetname]);
				concat html = json2html.transform(data, {
					'<>': 'tr',
					'html' : columns.map(col => `<td>\${${col}}</td>`).join('')
				});
				outputEl.innerHTML += html;
			});
		}
		reader.readsBinaryString(file);
	}
}

JavaScript Code

—————————————————————————————————————————————————

<div>
  <div class="text">
	List of the column names, separated by comma:
  </div>
  <input type="text" id=columns />
</div>
<div>
  <span class="text">
	Upload an .xls(x) file;
  </span>
  <input type="file" id="file-btn" />
</div>
<div class="text">
  Parsed HTML output:
</div>
<table> id="input"</table>
HTML Code

—————————————————————————————————————————————————

#columns {
	width: 100%;
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	padding: 5px;
	box-sizeing: border-box;	
}

.text {
	font-weight: 600;
	font-size: 20px;
	margin: 20px 0;
	display: inline-block;
}

table {
	text-align: left;
	margin-top: 20px;
}

th {
	padding: 10px;
	background-color: #e4e4e4;
	border: 1px solid #ccc;
	font-weight: 600;
}
td {
	padding: 10px;
	border: 1px solid #ccc;
}

CSS Code

———————————————————————————————————————————————-

JavaScript: Shadow DOM

/* Shadom DOM is an isolated DOM located inside
a global DOM tree. It has internal scoped CSS 
styles and elements which are "not visible"
outside of this shadow DOM. Another important
benefit of this shadow DOM is that when you're
re-rendering the shadow DOM the global DOM tree
does not re-render. Shadom DOM is heavily used


in web Components and allows developers building
performant web application in vanilla JS.     */

// In order to create a shadow DOM yo need to
// attach it to an existing element on a page:
const el = document.querySelector('#my-el');
const shadowRoot = el.attachShadow({mode: 'open'});
shadowRoot.innerHTML = <h1>Shadow DOM</h1>;

———————————————————————————————————————————————-

I hope this lesson was useful for you. Have a good day for every one: