HTML/JavaScript 从服务器上的 xlsx 或 csv 文件读取并放入 table

Question

所以这里是大部分代码（减去其他页面，css 文件，其他 js 文件，基本上与问题无关的文件）

我对它如何加载和创建 table 以及所有这些感到非常满意。我现在想弄清楚的是如何将这个 excel 文件放在服务器上（而不是在用户的电脑上），并让它在页面加载时自动 select 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 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>

我的下一个大任务是弄清楚如何将下面表格中的数据写入 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 文件运行。说它在服务器上运行ning 的想法是因为我知道有些浏览器不是你的忠实粉丝，只是随机抓取用户 PC 上的文件所以我想把它和其余的放在文件夹中这些文件将解决这个问题。它用于储藏室，我们想在 HTML 中尝试这样做，以帮助解决运行在计算机上未签名的 exe 文件的安全限制。想法是将 xlsx/csv 文件加载到浏览器中的 table 中，项目旁边的复选框可在它离开储藏室时将其移动到存档文件，以便以后需要时参考，并有一个将物品添加到储藏室时将物品添加到库存的页面。我没有意识到我使用的只能用于访问用户 PC 上的文件。如果您不知道我们在这方面不是很擅长...我想需要从头开始谢谢您的帮助。

excel 文件背后的想法是，我不知道如何添加到 HTML 上的 table。我的意思是它添加到 table 但是一旦你重新加载页面它就会消失。我不知道如何让它真正添加到 HTML 所以如果你关闭页面并重新打开它，它仍然存在

Answer 1

您分享的代码是在客户端浏览器中执行的。它永远不会从服务器读取文件。要从服务器目录中读取文件，您必须在服务器端编写代码，然后将 excel 文件提供给客户端！

如果您有服务器端代码，请分享它以澄清您的问题。

为了达到你想要的结果，你可以在 express 或任何其他后端 language/framework 中编写你的后端，以防你使用 express 首先上传 excel 文件到服务器然后创建 http路由读取文件。

HTML/JavaScript 从服务器上的 xlsx 或 csv 文件读取并放入 table

HTML/JavaScript read from an xlsx or csv file on the server and put in a table

html

javascript

excel

xlsx

filereader