如何创建已导入Excel文件的历史记录表格

以下是基于你已有的Excel导入功能，添加导入历史日志表格的具体实现步骤：

1. 准备日志表格的HTML结构 #

在页面里新增用于展示导入历史的表格，可放在导入功能区域下方：

<div>
  <h3>导入历史日志</h3>
  <table id="importLogTable" border="1">
    <thead>
      <tr>
        <th>文件名</th>
        <th>导入时间</th>
        <th>导入状态</th>
      </tr>
    </thead>
    <tbody id="logTableBody">
      <!-- 日志内容将通过JS动态添加 -->
    </tbody>
  </table>
</div>

2. 修改Excel导入逻辑，添加日志记录 #

假设你使用SheetJS（xlsx库）处理Excel导入，在原有逻辑中加入文件名提取和日志生成的代码：

// 绑定文件选择事件（你的现有导入触发逻辑）
document.getElementById('excelFileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  // 获取文件名、生成导入时间
  const fileName = file.name;
  const importTime = new Date().toLocaleString();
  let status = '成功';

  // 原有Excel解析逻辑
  const reader = new FileReader();
  reader.onload = function(event) {
    try {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      // ... 你已有的解析并渲染数据到表格的代码 ...

      // 导入成功后添加日志
      addImportLog(fileName, importTime, status);
      // 可选：将日志保存到本地存储，避免刷新丢失
      saveLogToLocalStorage(fileName, importTime, status);
    } catch (error) {
      status = '失败：' + error.message;
      addImportLog(fileName, importTime, status);
      saveLogToLocalStorage(fileName, importTime, status);
    }
  };
  reader.readAsArrayBuffer(file);
});

// 动态添加日志到表格的工具函数
function addImportLog(fileName, importTime, status) {
  const tbody = document.getElementById('logTableBody');
  const row = tbody.insertRow();
  row.insertCell(0).textContent = fileName;
  row.insertCell(1).textContent = importTime;
  row.insertCell(2).textContent = status;
  // 给失败日志添加红色标识
  if (status.includes('失败')) row.style.color = '#dc3545';
}

// 保存日志到localStorage的工具函数
function saveLogToLocalStorage(fileName, importTime, status) {
  let logs = JSON.parse(localStorage.getItem('excelImportLogs')) || [];
  logs.push({ fileName, importTime, status });
  localStorage.setItem('excelImportLogs', JSON.stringify(logs));
}

// 页面加载时恢复历史日志
window.onload = function() {
  const logs = JSON.parse(localStorage.getItem('excelImportLogs')) || [];
  logs.forEach(log => addImportLog(log.fileName, log.importTime, log.status));
};

3. 核心说明 #

• 文件名获取：直接通过file.name获取用户选择的Excel文件名，无需额外处理。
• 日志持久化：用localStorage实现本地日志存储，若需要跨设备保留日志，可对接后端接口存入数据库。
• 状态反馈：通过try-catch捕获导入异常，把失败原因也记录到日志中，方便排查问题。

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