加载jsonl的HTML.md - Shanyong Wang

2025-03-19

加载jsonl的HTML.md

用于加载统计文件下的jsonl文件作为html可视化展示的代码。

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>JSONL Viewer</title>
  <style>
    body { font-family: system-ui, -apple-system, BlinkMacSystemFont; margin: 20px; background: #fafafa; }
    h1 { font-size: 18px; margin: 0 0 12px; }
    .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
    input[type="text"] { padding: 6px 8px; width: 360px; max-width: 90vw; }
    button { padding: 6px 10px; cursor: pointer; }
    .hint { color: #666; font-size: 13px; margin: 6px 0 14px; }
    .error { color: #b00020; font-size: 13px; }

.table-wrapper { overflow-x: auto; }
    table { border-collapse: collapse; width: max-content; min-width: 100%; background: #fff; table-layout: fixed; }
    th, td { border: 1px solid #ddd; padding: 0; font-size: 13px; text-align: left; vertical-align: top; overflow: hidden; }
    th { background: #f0f0f0; white-space: nowrap; user-select: none; position: relative; padding: 8px; }
    tr:nth-child(even) td { background: #fafafa; }

td.idx-cell, th.idx-cell {
      width: 36px; min-width: 36px; max-width: 36px;
      text-align: center;
      background: #f0f0f0 !important;
      position: sticky; left: 0; z-index: 1;
      border-right: 2px solid #ccc;
      font-size: 11px; color: #888;
      padding: 6px 4px;
    }

/* 单元格内层：overflow-y: auto 实现纵向滚动 */
    .cell-inner {
      padding: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      height: 100%;
      /* 细滚动条样式 */
      scrollbar-width: thin;
      scrollbar-color: #ccc transparent;
    }
    .cell-inner::-webkit-scrollbar { width: 6px; }
    .cell-inner::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
    .cell-inner::-webkit-scrollbar-thumb:hover { background: #aaa; }
    .cell-inner::-webkit-scrollbar-track { background: transparent; }

pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: inherit;
    }

tr.resize-row td {
      padding: 0; height: 5px;
      background: transparent;
      border-top: none; border-bottom: 1px solid #ddd;
      cursor: row-resize; user-select: none;
    }
    tr.resize-row:hover td,
    tr.resize-row.resizing td { background: #b0c4de; }

.ctrl-bar { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .ctrl-bar label { font-size: 13px; color: #555; }
    .ctrl-bar input[type=number] { width: 60px; padding: 3px 6px; font-size: 12px; }
    .ctrl-bar span.tip { font-size: 12px; color: #999; }

.col-resizer {
      position: absolute; right: 0; top: 0;
      height: 100%; width: 5px;
      cursor: col-resize; user-select: none; z-index: 3;
    }
    .col-resizer:hover, .col-resizer.resizing { background: #888; }
  </style>
</head>
<body>

<h1>JSONL 文件展示器</h1>

<div class="row">
  <label>JSONL 文件名（同级）：</label>
  <input id="jsonlName" type="text" value="output.jsonl" />
  <button id="btnLoad">加载</button>
  <span style="width:12px;"></span>
  <label>或者：本地选择文件</label>
  <input type="file" id="fileInput" accept=".jsonl" />
</div>

<div class="hint">注意：请用本地静态服务器打开本页面（不要用 file:// 直接打开），否则 fetch 读取本地 jsonl 可能被浏览器拦截。</div>

<div class="ctrl-bar" id="ctrlBar" style="display:none;">
  <label>默认行高：</label>
  <input type="number" id="defaultHeight" value="60" min="20" max="800" step="4" />
  <span class="tip">px  |  拖动行底部蓝条调整行高  |  单元格内容超出时可滚动</span>
  <button id="btnResetAll">重置所有行高</button>
</div>

function parseJsonl(text) {
    return text.split(/\r?\n/).filter(l => l.trim()).map(line => {
      try { return JSON.parse(line); }
      catch { return { __parse_error__: line }; }
    });
  }

function applyRowHeight(dataTr, h) {
    dataTr.style.height = h + "px";
    dataTr.querySelectorAll(".cell-inner").forEach(el => {
      el.style.height = h + "px";
      el.style.maxHeight = h + "px";
    });
  }

function renderTable(rows) {
    const thead = document.getElementById("thead");
    const tbody = document.getElementById("tbody");
    thead.innerHTML = ""; tbody.innerHTML = "";
    rowHeights.length = 0;
    document.getElementById("ctrlBar").style.display = rows.length ? "flex" : "none";
    if (!rows.length) return;

const keys = new Set();
    rows.forEach(r => Object.keys(r).forEach(k => keys.add(k)));
    const columns = Array.from(keys);

const trHead = document.createElement("tr");
    const thIdx = document.createElement("th");
    thIdx.className = "idx-cell"; thIdx.textContent = "#";
    trHead.appendChild(thIdx);
    columns.forEach(col => {
      const th = document.createElement("th");
      th.textContent = col;
      th.style.width = DEFAULT_COL_WIDTH + "px";
      th.style.minWidth = DEFAULT_COL_WIDTH + "px";
      makeColResizer(th);
      trHead.appendChild(th);
    });
    thead.appendChild(trHead);

rows.forEach((row, i) => {
      const h = currentDefaultHeight;
      rowHeights[i] = h;

const dataTr = document.createElement("tr");
      dataTr.dataset.rowIdx = i;

const tdIdx = document.createElement("td");
      tdIdx.className = "idx-cell"; tdIdx.textContent = i;
      dataTr.appendChild(tdIdx);

columns.forEach(col => {
        const td = document.createElement("td");
        const inner = document.createElement("div");
        inner.className = "cell-inner";
        const val = row[col];
        if (val !== null && val !== undefined && typeof val === "object") {
          const pre = document.createElement("pre");
          pre.textContent = JSON.stringify(val, null, 2);
          inner.appendChild(pre);
        } else {
          inner.textContent = (val ?? "").toString();
        }
        td.appendChild(inner);
        dataTr.appendChild(td);
      });

applyRowHeight(dataTr, h);
      tbody.appendChild(dataTr);

const resizeTr = document.createElement("tr");
      resizeTr.className = "resize-row";
      const resizeTd = document.createElement("td");
      resizeTd.colSpan = columns.length + 1;
      resizeTd.title = "拖动调整行高";
      resizeTr.appendChild(resizeTd);
      makeRowResizer(resizeTr, dataTr, i);
      tbody.appendChild(resizeTr);
    });
  }

document.getElementById("defaultHeight").addEventListener("change", e => {
    currentDefaultHeight = Math.max(20, parseInt(e.target.value) || 60);
  });

document.getElementById("btnResetAll").addEventListener("click", () => {
    const h = currentDefaultHeight;
    document.querySelectorAll("#tbody tr[data-row-idx]").forEach(dataTr => {
      const i = parseInt(dataTr.dataset.rowIdx);
      rowHeights[i] = h;
      applyRowHeight(dataTr, h);
    });
  });

async function loadFromSameFolder(filename) {
    const status = document.getElementById("status");
    status.textContent = "";
    try {
      const resp = await fetch("./" + filename, { cache: "no-store" });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}：无法读取 ${filename}`);
      renderTable(parseJsonl(await resp.text()));
    } catch (e) {
      status.textContent = `加载失败：${e.message}`;
    }
  }

document.getElementById("fileInput").addEventListener("change", e => {
    const file = e.target.files[0]; if (!file) return;
    document.getElementById("status").textContent = "";
    const reader = new FileReader();
    reader.onload = ev => renderTable(parseJsonl(ev.target.result));
    reader.readAsText(file);
  });

document.getElementById("btnLoad").addEventListener("click", () => {
    const name = document.getElementById("jsonlName").value.trim();
    if (name) loadFromSameFolder(name);
  });

loadFromSameFolder(document.getElementById("jsonlName").value.trim());
</script>
</body>
</html>

</body>
</html>

预览