HTML/JavaScript read from an xlsx or csv file on the server and put in a table
Question
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 page 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">
<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 page 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>
Any help at all is greatly appreciated
---------------UPDATED-------------------
Honestly, it won't actually be running on a server. This will just be stored on a computer and run by clicking the index.html file. The idea in saying it would be running on the server was because I know some browsers aren't big fans of you just grabbing a file on the user's PC randomly so I thought putting it in the folder with the rest of the files would be a work around on that. It's for a storage room, we thought to try to do it in HTML to help with security restrictions of running unsigned exe files on the computer. The idea was to load the xlsx/csv file into a table in the browser, checkboxes next to the items to move it to an archive file when it leaves the storage room for later reference if needed, and have a page to add items to the inventory when things are added to the storage room. I did not realize what I was using can only be used to access a file on the users PC. If you can't tell we aren't very good at this...I suppose will need to start from scratch Thank you for the help.
The idea behind the excel file is, I couldn't figure out how to add to a table on HTML. I mean it adds to the table but once you reload the page it goes away. I couldn't figure out how to make it actually add it to the HTML so if you close the page and reopen it, it is still there
1 answers
solution1
0 ACCPTED 2022-01-16 23:08:52
The code which you have shared is executed in client's browser. it will never read files from server. to read file from servers directory you have to write code in server side then serve your excel file to client side!
if you have server side code please share that to clarify your question.
to achieve your desired results you can write you backend in express or any other backend language/framework in which you are comfortable in case you are using express first upload excel file to server then create http route read file(s).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.