如何实现HTML表格自动刷新？无需手动加载文件更新数据

我做了一个HTML页面，原本设计加载CSV文件（数据已整理成表格）来重建页面表格，每天得手动加载文件更新数据；现在代码改成加载XLSX文件了。想知道怎么不用手动操作，实现表格自动更新？以下是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial=1.0">
    <title>Pricelist</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
<div class="table"></div>
<script>
    let table = document.querySelector(".table");
    (
        async()=>{
            let workbook = XLSX.read(await(await fetch("./excel/ProdottiEstero0707.xlsx")).arrayBuffer());
            console.log(workbook);
            let worksheet = workbook.SheetNames;
            worksheet.forEach(name=>{
                let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
                table.innerHTML +=  `
                <img src="atomiclogo02.png" width=50 height=50/> &nbsp <h3 style="display: inline-block;">Pricelist 07/07/2023</h3><br>${html}`
            })
        }
    )()
</script>
</body>

</html>

可行的自动更新方案 #

1. 固定文件名+定时刷新（最简单的方案） #

如果能把每日更新的XLSX文件统一命名（比如固定叫ProdottiEstero.xlsx，替换掉带日期的文件名），可以用两种方式实现自动更新：

方式A：页面全局定时刷新

在<head>标签里添加一行代码，设置页面每隔指定时间自动刷新（示例为1小时刷新一次，可自行调整）：

<meta http-equiv="refresh" content="3600">

页面每到时间就会重新加载，自动拉取最新的同名XLSX文件。

方式B：局部刷新表格（体验更好）

不用刷新整个页面，只定时更新表格内容，同时解决标题里日期固定的问题：

<script>
    let table = document.querySelector(".table");

    // 封装加载数据的核心函数
    async function loadExcelData() {
        // 加时间戳避免浏览器缓存旧文件
        const fileUrl = `./excel/ProdottiEstero.xlsx?t=${Date.now()}`;
        let workbook = XLSX.read(await(await fetch(fileUrl)).arrayBuffer());
        let worksheet = workbook.SheetNames;
        
        // 先清空原有内容，避免重复叠加
        table.innerHTML = '';
        
        worksheet.forEach(name=>{
            let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
            // 动态生成当前日期的标题
            const today = new Date().toLocaleDateString('it-IT'); // 生成类似07/07/2023的格式
            table.innerHTML +=  `
            <img src="atomiclogo02.png" width=50 height=50/> &nbsp <h3 style="display: inline-block;">Pricelist ${today}</h3><br>${html}`
        })
    }

    // 页面加载完成先执行一次
    loadExcelData();
    // 每1小时执行一次（3600000毫秒），可根据需求调整间隔
    setInterval(loadExcelData, 3600000);
</script>

2. 保留带日期的文件名，自动识别最新文件 #

如果必须保留带日期的命名规则（比如ProdottiEstero0707.xlsx），需要服务器配合允许访问文件目录，前端可以请求目录列表后筛选最新文件：

// 获取目录下最新的XLSX文件
async function getLatestExcelFile() {
    const dirResponse = await fetch("./excel/");
    const dirHtml = await dirResponse.text();
    // 匹配所有符合命名规则的XLSX文件
    const fileNames = dirHtml.match(/ProdottiEstero\d{4}\.xlsx/g) || [];
    // 按文件名排序（日期数字越大越靠前）
    fileNames.sort((a,b) => b.localeCompare(a));
    // 返回最新文件路径，没有的话用默认文件
    return fileNames[0] ? `./excel/${fileNames[0]}?t=${Date.now()}` : "./excel/ProdottiEstero0707.xlsx";
}

// 修改加载函数，先获取最新文件再加载
async function loadExcelData() {
    const latestFile = await getLatestExcelFile();
    let workbook = XLSX.read(await(await fetch(latestFile)).arrayBuffer());
    // 后续表格生成逻辑和之前一致...
}

// 初始化+定时执行
loadExcelData();
setInterval(loadExcelData, 3600000);

关键注意事项 #

• 一定要加时间戳参数（?t=${Date.now()}），避免浏览器缓存旧的XLSX文件，导致更新不生效。
• 如果是跨域环境，需要服务器配置CORS允许前端请求文件。
• 定时间隔可以根据实际更新频率调整，比如每天凌晨更新数据，就设置在凌晨后定时刷新一次即可，不用频繁请求。

内容的提问来源于stack exchange，提问作者Silvia