167 lines
6.1 KiB
HTML
167 lines
6.1 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>Excel 转 Markdown 表格</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF',
|
|
secondary: '#64748b',
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.table-fixed-layout {
|
|
table-layout: fixed;
|
|
}
|
|
.paste-area table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
.paste-area td, .paste-area th {
|
|
border: 1px solid #cbd5e1;
|
|
padding: 6px 10px;
|
|
min-width: 80px;
|
|
}
|
|
.paste-area th {
|
|
background-color: #f1f5f9;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen">
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
|
<header class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold text-slate-800 mb-2">
|
|
<i class="fa-solid fa-table text-primary mr-2"></i>Excel → Markdown 表格转换
|
|
</h1>
|
|
<p class="text-secondary">直接粘贴 Excel / 网页表格，左侧实时预览，右侧自动生成 Markdown</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- 左侧：可粘贴表格区域 -->
|
|
<div class="bg-white rounded-lg shadow p-5">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-xl font-semibold">表格预览</h2>
|
|
<button id="clearLeft" class="px-3 py-1.5 bg-slate-200 rounded hover:bg-slate-300 transition">
|
|
<i class="fa-solid fa-trash mr-1"></i>清空
|
|
</button>
|
|
</div>
|
|
<div id="pasteArea" class="paste-area border border-slate-300 rounded p-3 h-[calc(100vh-240px)] overflow-auto bg-white">
|
|
<div class="text-slate-400 text-center py-10">在此粘贴 Excel 或网页表格内容</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：Markdown 输出 -->
|
|
<div class="bg-white rounded-lg shadow p-5">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-xl font-semibold">Markdown 输出</h2>
|
|
<button id="copyMd" class="px-3 py-1.5 bg-primary text-white rounded hover:opacity-90 transition">
|
|
<i class="fa-solid fa-copy mr-1"></i>复制
|
|
</button>
|
|
</div>
|
|
<pre id="mdOutput" class="border border-slate-300 rounded p-3 h-[calc(100vh-240px)] overflow-auto bg-slate-50 whitespace-pre-wrap"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 p-4 bg-white rounded shadow text-secondary">
|
|
<h3 class="font-semibold mb-2"><i class="fa-solid fa-circle-info text-primary mr-1"></i>使用说明</h3>
|
|
<ul class="list-disc pl-5 space-y-1">
|
|
<li>直接复制 Excel 或网页里的表格，粘贴到左侧区域</li>
|
|
<li>左侧会自动渲染成可视化表格，格式不会丢失</li>
|
|
<li>右侧实时生成标准 Markdown 表格</li>
|
|
<li>一键复制，可直接用于 Notion、GitHub、语雀、Obsidian</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const pasteArea = document.getElementById('pasteArea');
|
|
const mdOutput = document.getElementById('mdOutput');
|
|
const clearLeft = document.getElementById('clearLeft');
|
|
const copyMd = document.getElementById('copyMd');
|
|
|
|
// 粘贴监听（核心）
|
|
pasteArea.addEventListener('paste', (e) => {
|
|
e.preventDefault();
|
|
const html = e.clipboardData.getData('text/html');
|
|
const text = e.clipboardData.getData('text');
|
|
|
|
if (html && html.includes('<table')) {
|
|
pasteArea.innerHTML = html;
|
|
} else {
|
|
pasteArea.innerHTML = textToTable(text);
|
|
}
|
|
|
|
setTimeout(renderMarkdown, 10);
|
|
});
|
|
|
|
// 纯文本转表格（Excel 粘贴纯文本也能识别）
|
|
function textToTable(text) {
|
|
const rows = text.trim().split(/\r?\n/).filter(i => i);
|
|
let html = '<table>';
|
|
rows.forEach(row => {
|
|
html += '<tr>';
|
|
row.split('\t').forEach(cell => {
|
|
html += '<td>' + cell + '</td>';
|
|
});
|
|
html += '</tr>';
|
|
});
|
|
html += '</table>';
|
|
return html;
|
|
}
|
|
|
|
// 把左侧表格转成 Markdown
|
|
function renderMarkdown() {
|
|
const table = pasteArea.querySelector('table');
|
|
if (!table) {
|
|
mdOutput.textContent = '请粘贴表格内容';
|
|
return;
|
|
}
|
|
|
|
let md = '';
|
|
const rows = table.querySelectorAll('tr');
|
|
|
|
rows.forEach((tr, idx) => {
|
|
const cells = tr.querySelectorAll('td, th');
|
|
const rowContent = Array.from(cells).map(c => c.innerText.trim());
|
|
|
|
md += '| ' + rowContent.join(' | ') + ' |\n';
|
|
|
|
// 表头分隔线
|
|
if (idx === 0) {
|
|
md += '| ' + rowContent.map(() => '---').join(' | ') + ' |\n';
|
|
}
|
|
});
|
|
|
|
mdOutput.textContent = md;
|
|
}
|
|
|
|
// 清空
|
|
clearLeft.addEventListener('click', () => {
|
|
pasteArea.innerHTML = '<div class="text-slate-400 text-center py-10">在此粘贴 Excel 或网页表格内容</div>';
|
|
mdOutput.textContent = '';
|
|
});
|
|
|
|
// 复制
|
|
copyMd.addEventListener('click', async () => {
|
|
const content = mdOutput.textContent;
|
|
if (!content.trim()) return alert('无内容可复制');
|
|
await navigator.clipboard.writeText(content);
|
|
copyMd.innerHTML = '<i class="fa-solid fa-check mr-1"></i>已复制';
|
|
setTimeout(() => {
|
|
copyMd.innerHTML = '<i class="fa-solid fa-copy mr-1"></i>复制';
|
|
}, 1500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |