So here is the bulk of the code (Minus other pages, the css files, other js files, basically files unrelated to the question)
I am very happy with how this loads and creates the table and all of that. What I am trying to figure out now is how I can place this excel file on the server (Not on the user’s pc) and have it automatically select the excel file on page load. The file will be stored in “Files/Data.xlsx”
This filename is Inventory.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Some Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Reference the CSS File -->
<link rel="stylesheet" href="css/main.css">
<!--First we have to include Bootstrap Stylesheet and SheetJS library link at header of our HTML page.-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/xlsx.full.min.js"></script>
</head>
<body>
<div id="topMenu">
<ul>
<!--This I am using as a navigation bar and is unrelated-->
</ul>
</div>
<div class="container">
<div class="card">
<div class="card-body">
<input type="file" id="excel_file" />
</div>
</div>
<br />
<table id="myTable">
<tr id="search">
<!--This is some stuff used to filter the table and is unrelated-->
</tr>
<tbody id="excel_data" class="mt-5">
</tbody>
</table>
</div>
</body>
</html>
<script>
const excel_file = document.getElementById('excel_file');
excel_file.addEventListener('change', (event) => {
if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel']
.includes(event.target.files[0].type)) {
document.getElementById('excel_data').innerHTML =
'<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';
excel_file.value = '';
return false;
}
var reader = new FileReader();
reader.readAsArrayBuffer(event.target.files[0]);
reader.onload = function(event) {
var data = new Uint8Array(reader.result);
var work_book = XLSX.read(data, {
type: 'array'
});
var sheet_name = work_book.SheetNames;
var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
header: 1
});
if (sheet_data.length > 0) {
var table_output = '<table class="table table-striped table-bordered">';
for (var row = 0; row < sheet_data.length; row++) {
table_output += '<tr>';
for (var cell = 0; cell < sheet_data[row].length; cell++) {
if (row == 0) {
table_output += '<th>' + sheet_data[row][cell] + '</th>';
} else {
table_output += '<td>' + sheet_data[row][cell] + '</td>';
}
}
table_output += '</tr>';
}
table_output += '</table>';
document.getElementById('excel_data').innerHTML = table_output;
}
excel_file.value = '';
}
});
</script>
My next big task will be figuring out how to write the data from the below form to the next empty row in the excel document….
This filename is AddItem.html
<form>
<label for="prNumberInput">Enter the PR Number: </label>
<input type="text" name="prNumberInput" placeholder="Enter the PR Number" /><br>
<label for="netbuildNumberInput">Enter the NetBuild Number: </label>
<input type="text" name="netbuildNumberInput" placeholder="Enter the NetBuild Number" /><br>
<label for="trackingNumberInput">Enter the Tracking Number: </label>
<input type="text" name="trackingNumberInput" placeholder="Enter the Tracking Number" /><br>
<label for="partNumberInput">Enter the Part Number: </label>
<input type="text" name="partNumberInput" placeholder="Enter the Part Number" /><br>
<input type="button" onclick="AddItemSubmit()" value="Add Item">
</form>