88 lines
4.3 KiB
HTML
88 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>{{TITLE}}</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box;}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f0f2f5;color:#333;}
|
|
.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
|
.header h1{font-size:17px;font-weight:600;}
|
|
.header .sub{font-size:13px;opacity:0.85;}
|
|
.header .close-btn{display:inline-block;padding:6px 16px;background:rgba(255,255,255,0.2);color:#fff;border-radius:6px;text-decoration:none;font-size:13px;cursor:pointer;}
|
|
.header .close-btn:hover{background:rgba(255,255,255,0.3);}
|
|
.container{max-width:1400px;margin:0 auto;padding:16px;}
|
|
.info-bar{background:#fff;border-radius:8px;padding:10px 16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.06);font-size:13px;color:#666;display:flex;gap:20px;flex-wrap:wrap;}
|
|
.table-wrap{background:#fff;border-radius:8px;overflow:auto;box-shadow:0 1px 3px rgba(0,0,0,0.06);padding:4px;}
|
|
.table-wrap table{border-collapse:collapse;width:100%;font-size:13px;min-width:600px;}
|
|
.table-wrap td,.table-wrap th{padding:6px 10px;border:1px solid #e0e0e0;white-space:pre-wrap;word-break:break-word;vertical-align:top;}
|
|
.table-wrap tr:hover td{background:#fafafa;}
|
|
.loading{text-align:center;padding:60px 20px;color:#999;font-size:15px;}
|
|
.error{text-align:center;padding:60px 20px;font-size:16px;color:#f5222d;}
|
|
.footer{text-align:center;padding:14px;color:#999;font-size:12px;}
|
|
.sheet-tabs{display:flex;gap:4px;padding:8px 0;flex-wrap:wrap;}
|
|
.sheet-tab{padding:4px 14px;border-radius:4px 4px 0 0;font-size:12px;cursor:pointer;border:1px solid #e0e0e0;border-bottom:none;background:#f5f5f5;color:#666;}
|
|
.sheet-tab.active{background:#667eea;color:#fff;border-color:#667eea;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>{{TITLE}}</h1>
|
|
<div>
|
|
<span class="sub" id="sheetInfo">加载中...</span>
|
|
<a href="javascript:window.close()" class="close-btn">✕ 关闭</a>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="info-bar">
|
|
<span>📄 {{FILENAME}}</span>
|
|
<span>⏰ {{UPLOAD_TIME}}</span>
|
|
</div>
|
|
<div id="sheetTabs" class="sheet-tabs"></div>
|
|
<div id="tableWrap" class="table-wrap">
|
|
<div class="loading">⏳ 正在加载 Excel 文件...</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">蝶雅采购智能体平台</div>
|
|
<script>
|
|
var dlUrl = "{{DOWNLOAD_URL}}";
|
|
var wb = null;
|
|
function switchSheet(el) {
|
|
var name = el.getAttribute("data-sheet");
|
|
if (!wb || !name) return;
|
|
var ws = wb.Sheets[name];
|
|
if (!ws) return;
|
|
var html = XLSX.utils.sheet_to_html(ws, {editable: false});
|
|
// 修复 Excel 特殊字体符号显示（如 Wingdings 的 þ → ☑）
|
|
html = html.replace(/\u00fe/g, "\u2611");
|
|
document.getElementById("tableWrap").innerHTML = html;
|
|
var ref = ws["!ref"];
|
|
var info = name + " | ";
|
|
if (ref) { var r = XLSX.utils.decode_range(ref); info += (r.e_r - r.s_r + 1) + "行 x " + (r.e_c - r.s_c + 1) + "列"; }
|
|
document.getElementById("sheetInfo").textContent = info;
|
|
document.querySelectorAll(".sheet-tab").forEach(function(e) { e.classList.remove("active"); });
|
|
el.classList.add("active");
|
|
}
|
|
fetch(dlUrl).then(function(r) {
|
|
if (!r.ok) throw new Error("下载失败 (" + r.status + ")");
|
|
return r.arrayBuffer();
|
|
}).then(function(buf) {
|
|
wb = XLSX.read(buf, {type: "array", cellStyles: true});
|
|
var names = wb.SheetNames;
|
|
if (names.length === 0) { document.getElementById("tableWrap").innerHTML = '<div class="error">Excel文件为空</div>'; return; }
|
|
var tabsHtml = "";
|
|
names.forEach(function(name, i) {
|
|
tabsHtml += '<div class="sheet-tab' + (i === 0 ? " active" : "") + '" data-sheet="' + name.replace(/"/g, """) + '" onclick="switchSheet(this)">' + name + '</div>';
|
|
});
|
|
document.getElementById("sheetTabs").innerHTML = tabsHtml;
|
|
switchSheet(document.querySelector(".sheet-tab"));
|
|
}).catch(function(e) {
|
|
document.getElementById("tableWrap").innerHTML = '<div class="error">✖ 加载失败: ' + e.message + '</div>';
|
|
document.getElementById("sheetInfo").textContent = "加载失败";
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|