创建一个网站，显示从 Excel 文件读取的数据并定期更新

Question

我需要创建一个网站（本地网站也可以），读取 Excel 文件并将内容显示到表格中并定期更新内容。

我已经写了一些东西，但它没有像应有的那样定期更新网站内容。 你能帮我吗？

这就是页面选择并读取文件的方式：

document.getElementById('file-input').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        lastModified = new Date(file.lastModified);
        const reader = new FileReader();
        reader.onload = function (e) {
            fileData = new Uint8Array(e.target.result);
            updateTable();
        };
        reader.readAsArrayBuffer(file);
    }
});

function updateTable() {
    if (fileData) {
        const workbook = XLSX.read(fileData, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        const tableBody = document.getElementById('excel-data');
        tableBody.innerHTML = '';

        jsonData.forEach((row, rowIndex) => {
            if (rowIndex === 0) return; // Skip header row
            const tr = document.createElement('tr');
            row.forEach(cell => {
                const td = document.createElement('td');
                td.className = 'py-2 px-4 border-b border-gray-200';
                td.textContent = cell;
                tr.appendChild(td);
            });
            tableBody.appendChild(tr);
        });

        document.getElementById('last-modified')
          .textContent = `Data ultima modifica del file Excel: ${lastModified.toLocaleString()}`;
    }
}

这就是每 5 分钟更新一次的方式：

setInterval(() => {
    if (fileData) {
        updateTable();
    }
}, 300000);

使用调试器，函数

updateTable()

似乎被调用并重定向到以下 tailwind 函数

new MutationObserver(async r => {
        let e = !1;
        if (!cf) {
            cf = new MutationObserver(async () => await pf(!0));
            for (let t of document.querySelectorAll(`style[type="${uf}"]`))
                Pv(t)
        }
        for (let t of r)
            for (let i of t.addedNodes)
                i.nodeType === 1 && i.tagName === "STYLE" && i.getAttribute("type") === uf && (Pv(i),
                e = !0);
        await pf(e)
    }

但是在此之后，尽管Excel文件同时被修改，但内容没有更新。

Answer 1

这从根本上无法按照您设计的方式作为自动化流程运行。

1. 请记住，当文件输入框中发生“更改”事件时，您的代码仅将数据读入

   fileData

   。这意味着您需要手动进入该输入并再次选择一个文件，然后它才会读取任何新数据。仅当您选择“不同”文件时，“更改”事件才会发生。打开对话框并再次选择相同的对话框不会触发该事件。

即使您更改代码，使间隔代码选择当前在输入控件中的文件，并将其再次发送到 FileReader，也不会触发阅读器的
2. onload

   功能。无论如何都没有新的数据可供读取 - 只有当用户在输入控件中选择文件时，才会再次从磁盘中获取文件。

这是您无法解决的浏览器安全限制。想象一下，如果浏览器代码可以随时从用户磁盘任意读取数据，可能会造成危险/损害。仅当用户专门提供了文件时，它才会执行此操作，并且仅适用于用户明确提供的文件版本。用户未授予浏览器访问该文件的某些更高版本的权限。

如果您希望其工作并完全自动化，您将需要将 Excel 文件存储在您的网络服务器上，并从那里获取它。