如何基于XLSX.js按日期汇总hh:mm:ss.mss格式时间并生成HTML表格

原始Excel表格数据如下：

需求：按日期分组对时间列求和，将结果以“日期-时间总和”的HTML表格形式展示。用户已提供基础的XLSX.js读取代码：

let table = document.querySelector(".table");
(
  async() => {
    let workbook = XLSX.read(await (await fetch("./Book.xlsx")).arrayBuffer());
    console.log(workbook);
    let worksheet = workbook.SheetNames;
    worksheet.forEach(name => {
      let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
      table.innerHTML += `
                            <h3>${name}</h3>${html}
                            `;
    })
  }
)()

<table class="table">
</table>

以下是完整的实现代码，包含数据读取、时间求和、分组及结果渲染：

<table class="table"></table>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
let table = document.querySelector(".table");

// 工具函数：将hh:mm:ss.mss格式时间转换为毫秒数
function timeToMs(timeStr) {
  const [hours, minutes, seconds, ms] = timeStr.split(':').map(Number);
  return hours * 3600000 + minutes * 60000 + seconds * 1000 + ms;
}

// 工具函数：将毫秒数转换回hh:mm:ss.mss格式
function msToTime(totalMs) {
  const hours = Math.floor(totalMs / 3600000);
  const remainingMs = totalMs % 3600000;
  const minutes = Math.floor(remainingMs / 60000);
  const remainingMs2 = remainingMs % 60000;
  const seconds = Math.floor(remainingMs2 / 1000);
  const ms = remainingMs2 % 1000;
  // 补零确保格式统一
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${ms.toString().padStart(3, '0')}`;
}

(async () => {
  const workbook = XLSX.read(await (await fetch("./Book.xlsx")).arrayBuffer());
  
  workbook.SheetNames.forEach(sheetName => {
    // 将工作表数据转换为JSON数组
    const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
    
    // 按日期分组并计算时间总和
    const grouped = {};
    data.forEach(row => {
      const date = row.Date;
      const timeMs = timeToMs(row.Time);
      
      if (!grouped[date]) {
        grouped[date] = 0;
      }
      grouped[date] += timeMs;
    });
    
    // 生成汇总表格的HTML
    let summaryHtml = `<h3>${sheetName} - 时间汇总</h3>`;
    summaryHtml += `<table border="1"><thead><tr><th>日期</th><th>时间总和</th></tr></thead><tbody>`;
    
    Object.entries(grouped).forEach(([date, totalMs]) => {
      summaryHtml += `<tr><td>${date}</td><td>${msToTime(totalMs)}</td></tr>`;
    });
    
    summaryHtml += `</tbody></table>`;
    
    // 将汇总表格插入页面
    table.innerHTML += summaryHtml;
  });
})();
</script>

关键说明 #

• 时间转换：通过timeToMs将时间字符串转为毫秒数，方便数值求和；再通过msToTime将总毫秒数转回指定格式。
• 分组求和：使用对象grouped存储每个日期对应的总毫秒数，遍历原始数据累加计算。
• 结果渲染：遍历分组后的结果，拼接HTML表格代码，插入到页面中。

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