所以這是大部分代碼（減去其他頁面，css檔案，其他js檔案，基本上與問題無關的檔案）
我對它如何加載和創建表格以及所有這些感到非常滿意。我現在想弄清楚的是如何將此excel檔案放在服務器上（而不是在用戶的電腦上）并讓它在頁面加載時自動選擇excel檔案。該檔案將存盤在“Files/Data.xlsx”中
此頁面是 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 >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 >';
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>
我的下一個大任務將是弄清楚如何將下面表單中的資料寫入 excel 檔案中的下一個空行......
這個頁面是 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>
非常感謝任何幫助
- - - - - - - -更新 - - - - - - - - - -
老實說，它實際上不會在服務器上運行。這將只存盤在計算機上并通過單擊 index.html 檔案運行。說它將在服務器上運行的想法是因為我知道有些瀏覽器不是你的忠實粉絲，只是隨機抓取用戶 PC 上的一個檔案，所以我認為將它與其余檔案一起放入檔案夾中解決這個問題。這是一個儲藏室，我們想嘗試用 HTML 來做，以幫助解決在計算機上運行未簽名 exe 檔案的安全限制。想法是將 xlsx/csv 檔案加載到瀏覽器中的表格中，專案旁邊的復選框以在它離開存盤空間時將其移動到存檔檔案以供以后參考（如果需要），并有一個頁面可以將專案添加到物品添加到儲藏室時的庫存。我沒有意識到我使用的只能用于訪問用戶 PC 上的檔案。如果你不能說我們不是很擅長這個......我想需要從頭開始謝謝你的幫助。
excel 檔案背后的想法是，我不知道如何添加到 HTML 表格中。我的意思是它會添加到表格中，但是一旦您重新加載頁面，它就會消失。我不知道如何讓它實際添加到 HTML 所以如果你關閉頁面并重新打開它，它仍然存在
uj5u.com熱心網友回復：
您共享的代碼在客戶端的瀏覽器中執行。它永遠不會從服務器讀取檔案。要從服務器目錄讀取檔案，您必須在服務器端撰寫代碼，然后將您的 excel 檔案提供給客戶端！
如果您有服務器端代碼，請分享以澄清您的問題。
為了達到您想要的結果，您可以使用 express 或任何其他您喜歡的后端語言/框架撰寫后端，以防您使用 express 首先將 excel 檔案上傳到服務器，然后創建 http 路由讀取檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413787.html
標籤：