本地网页读取Excel文件后无法实现定时更新的问题求助

我明白你遇到的困扰了——你当前的定时更新逻辑其实并没有重新读取本地已经修改的Excel文件，只是在重复解析第一次选择文件时缓存下来的fileData，这就是为什么文件修改后页面内容没变化的核心原因。

问题根源解析 #

浏览器出于安全限制，不允许网页在没有用户主动交互（比如手动选择文件）的情况下，直接访问本地文件系统。你当前的代码逻辑存在这个关键漏洞：

• 用户选择文件后，文件的二进制数据被存在fileData变量里，这是一份静态的缓存
• 定时任务只是反复调用updateTable()去解析这份旧的缓存数据，完全没有去读取本地已经修改后的文件

至于debug时进入Tailwind的MutationObserver代码，那只是Tailwind用来处理动态样式的内部逻辑，和你的数据更新没有关系，只是因为你更新DOM触发了它的样式监听而已。

可行的解决方案 #

方案1：简易手动刷新（快速实现）

如果不需要完全自动化，可以添加一个“刷新数据”按钮，让用户在文件修改后手动触发重新读取文件（受浏览器限制，还是需要用户再次选择文件）：

<button id="refresh-btn" class="px-4 py-2 bg-blue-500 text-white rounded">刷新数据</button>

document.getElementById('refresh-btn').addEventListener('click', function() {
    // 触发文件选择框重新选择文件
    document.getElementById('file-input').click();
});

用户点击按钮后重新选一次文件，就能加载最新的Excel内容了。

方案2：本地服务器实现自动更新（真正的自动化）

如果想要完全自动的定时更新，因为前端没法直接访问本地文件，我们可以用Node.js搭一个简单的本地服务器，让后端负责监控文件变化并推送最新数据：

步骤1：搭建Node.js后端

先安装依赖：

npm install express xlsx chokidar cors

然后创建server.js：

const express = require('express');
const XLSX = require('xlsx');
const chokidar = require('chokidar');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());
app.use(express.json());

// 替换成你的本地Excel文件路径
const EXCEL_PATH = './your-excel-file.xlsx';
let latestData = [];

// 读取Excel数据的工具函数
function readExcelData() {
    try {
        const workbook = XLSX.readFile(EXCEL_PATH);
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        latestData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        // 跳过表头行
        latestData = latestData.slice(1);
    } catch (err) {
        console.error('读取Excel失败:', err);
    }
}

// 初始读取一次数据
readExcelData();

// 监控文件变化，文件修改时自动重新读取
chokidar.watch(EXCEL_PATH).on('change', () => {
    console.log('Excel文件已更新，重新读取数据');
    readExcelData();
});

// 提供接口给前端获取最新数据
app.get('/api/excel-data', (req, res) => {
    res.json(latestData);
});

app.listen(port, () => {
    console.log(`本地服务器运行在 http://localhost:${port}`);
});

步骤2：修改前端代码

去掉原来的文件选择和fileData相关逻辑，改成定时请求后端接口获取最新数据：

// 每5分钟请求一次最新数据
setInterval(() => {
    fetchLatestData();
}, 300000);

// 页面加载时先获取一次数据
fetchLatestData();

function fetchLatestData() {
    fetch('http://localhost:3000/api/excel-data')
        .then(res => res.json())
        .then(jsonData => {
            const tableBody = document.getElementById('excel-data');
            tableBody.innerHTML = '';

            jsonData.forEach(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 = `数据最后更新时间: ${new Date().toLocaleString()}`;
        })
        .catch(err => console.error('获取数据失败:', err));
}

这样，当你修改本地的Excel文件后，后端会自动检测到变化并重新读取数据，前端定时请求就能拿到最新内容并更新表格了。

备注：内容来源于stack exchange，提问作者Giovanni