Skip to content

Instantly share code, notes, and snippets.

@am2222

am2222/index.html

Created July 14, 2019 02:47
Show Gist options
  • Save am2222/d9dc013bac76ed86bb6293d3bcc1551f to your computer and use it in GitHub Desktop.
Save am2222/d9dc013bac76ed86bb6293d3bcc1551f to your computer and use it in GitHub Desktop.
Download ZIP
read xlsx as js example
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-eqiv="X-UA-Compatible" content="IE-edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.css"/></script> -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> -->
<!-- <script src="jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js"></script>
<!-- <script src="xlsx.full.min.js"></script> -->
<!-- <script src="jquery-1.10.2.min.js" type="text/javascript"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script> -->
<!-- <script src="FileSaver.min.js" type="text/javascript"></script> -->
<!-- <script src="https://unpkg.com/canvas-datagrid"></script> -->
</head>
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
width: 500px;
height: 500px;
}
table td {
border: 1px black solid;
padding: 5px;
}
</style>
<body>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script> -->
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
var i=0;
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
i+=1
var XL_csv_object = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
// var json_object = JSON.stringify(XL_row_object);
// console.log(JSON.parse(json_object));
// jQuery( '#xlx_json' ).val( json_object );
$("#navigtion").append("<li><a data-toggle='tab' href='#" +sheetName+ i + "'>" + sheetName + "</a></li>");
$("#tabulator").append("<div class='tab-pane' id='" +sheetName+ i + "'/>");
// $("#" + sheetName+ i).append(sheet2tbl(workbook.Sheets[sheetName]));
var employee_data = XL_csv_object.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$("#" + sheetName+ i).append(table_data);
// $('#myframe').html(table_data);
// $('#mytable td').eq(2).append(document.getElementById("myframe").rows[3].cells[0].innerHTML);
// $.each(this.options, function (i2, v2) {
// $("#" + i).append("<div class='checkbox'><label><input type='checkbox' id='" + "this.key" + "' title='" + "this.desc" + "'>" + sheetName + "</label></div>");
// });
})
};
// var grid = canvasDatagrid();
// document.body.appendChild(grid);
// grid.data = output;
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<!-- <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea> -->
<!-- <header class="navbar navbar-static-top"> -->
<div class="container">
<nav>
<ul class="nav nav-tabs" id="navigtion"></ul>
</nav>
<div class="tab-content" id="tabulator"></div>
</div>
<!-- <div class="container-fluid">
<div class="tab-content" id="tabulator"></div>
</div>
</header> -->
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
@mosikh
Copy link

mosikh commented Jul 14, 2019

https://gist.github.com/mosikh/bd8e28f799026a9a456ce8ac062b81f8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment