# 🛠 被老板逼出来的“表格生成器”：一个前端的自救之路

作者 ：某位不想被优化的前端工程师
背景 ：老板一句"半天搞定"，我连夜造了个轮子
项目地址 ：github.com/zy1992829/z...
在线体验 ：zy1992829.github.io/zytableGene...

---

📞 一、老板一句话，前端肝半天

那天下午，老板踱步到我工位旁，语气轻松：

"最近面试的人多，我们的OA系统要上个面试人员登记表，前端半天能做完不？"

我抬头看了看老板，心想：不就是个表格嘛，能有多难？

"差不多吧，先看看模板长啥样。"

10分钟后，微信弹出一张图：

我一看：好家伙，跨行、跨列、居中、对齐、合并单元格......应有尽有！

---

🧱 二、三种布局方案的"血泪史"

方案一：div + flex ------ 套娃地狱

第一反应：用 div + flex 布局，自由度高！

结果：写到第三层嵌套时，我已经分不清哪个 div 是哪个了。CSS 越写越乱，margin 和 padding 全靠猜。10分钟后，我删掉了全部代码。

❌ 结论：结构复杂时，flex 不是银弹。

---

方案二：CSS Grid ------ 学不动了

听说 grid 很适合二维布局？那试试！

翻着 MDN 文档，grid-template-areas、grid-row、grid-column......脑子直接宕机。画了半小时，第一行还没对齐。

❌ 结论：grid 很强，但我菜。

---

方案三：table 标签 ------ 回归纯真

冷静下来一想：这不就是 table 的本职工作吗？

<table>、<tr>、<td>，再加上 rowspan 和 colspan，完美匹配需求！

于是，我吭哧吭哧写了一下午，终于把表画出来了。老板路过看了一眼：

"不错呀，效果挺好！再帮我画个人员转正申请表吧。"

我：？？？

那一刻，我意识到：这不是一个需求，而是一类需求。

---

🔍 三、寻找现成工具？理想很丰满

我开始幻想：有没有一个工具，能让行政小姐姐画好表，导出 HTML？

1. Excel / Word 导出 HTML？

试了 Office 和 WPS，导出的 HTML 满是冗余标签和内联样式，根本没法用。

2. 在线表格生成器？

搜了一圈，不是收费就是功能残缺。菜鸟教程那个只能生成基础表格，不支持跨行跨列。

🚫 结论：没有轮子，那就只能自己造。

---

🔨 四、造轮子：zyTableGenerator 诞生

周树人没说过，但我想说：不要重复造轮子，除非你天天都要画表。

于是，我花了点时间，做了这个小工具：zyTableGenerator

✨ 核心功能

• ✅ 支持 rowspan 和 colspan
• ✅ 双击编辑单元格内容
• ✅ 右键菜单设置跨行、跨列、字体样式
• ✅ 智能处理合并冲突（避免重叠）
• ✅ 一键导出 HTML 代码并下载

🎯 设计目标

让前端少写一个 td，让行政少画一张表。

---

🖼 五、实际效果演示

从"数 td"到"点鼠标"，效率提升 10 倍。

---

💡 六、技术实现亮点

1. 数据结构设计：字符串标记法

每个单元格存储为带前缀的字符串，如：

"rowspan-2|姓名"
"colspan-3|科目"
"cr-2-3|总分"
"style-base64|文本"

• rowspan-：跨行
• colspan-：跨列
• cr-：跨行列
• style-：Base64 编码的样式对象

💡 优点：结构清晰，易于解析，无需额外状态管理。

---

2. 合并冲突检测：矩形相交算法

当用户设置一个单元格跨行跨列时，必须检查是否与其他合并区域重叠：

function clearOverlappingSpans(startX, startY, r, c) {
  const endX = startX + c;
  const endY = startY + r;

  for (/* 遍历所有单元格 */) {
    if (
      startX < cellEndX &&
      endX > x &&
      startY < cellEndY &&
      endY > y
    ) {
      clearCellSpan(y, x); // 清除冲突
    }
  }
}

确保表格结构始终合法。

---

3. 样式持久化：Base64 编码

将字体、字号、颜色等样式对象序列化：

const styleObj = {
  font: '微软雅黑',
  size: 14,
  color: '#333',
  bold: true,
  textAlign: 'center'
};

const encoded = btoa(JSON.stringify(styleObj));
// 存入单元格：`style-${encoded}|文本`

✅ 导出时自动还原为内联样式。

---

4. HTML 导出：generateTableHTML()

遍历 renderTemp，解析标记，生成标准 HTML：

<table border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse;">
  <tr>
    <td rowspan="2" style="font-weight:bold;">姓名</td>
    <td>语文</td>
  </tr>
  <tr>
    <td>数学</td>
  </tr>
</table>

支持一键下载为 .html 文件。

---

🚀 七、使用场景

• ✅ 系统后台：合同、发票、物流单、审批表
• ✅ 行政办公：登记表、申请表、汇总表
• ✅ 教学场景：课程表、成绩单
• ✅ 低代码平台：表格组件配置

---

🔮 八、未来规划

• ✅ 支持背景色、边框样式
• ✅ 增加撤销/重做（Undo/Redo）
• ✅ 支持导入 JSON / Excel
• ✅ 转为 Vue/React 组件
• ✅ 多语言支持

---

📣 九、结语：写代码，也是在写生活

这个工具，源于一次"被逼无奈"，但它让我意识到：

真正的好工具，不是炫技，而是解决痛点。

它不完美，但足够实用。如果你也经常被"画表格"折磨，不妨试试它。

---

🌟 开源地址

• GitHub：github.com/zy1992829/z...
• 在线体验：zy1992829.github.io/zytableGene...

欢迎 Star ⭐、Fork、提 Issue 或 PR！

---

作者 ：某位还在写 td 的前端
日期 ：2025年8月12日
声明：本文为真实项目复盘，代码已开源，欢迎交流。

---

如果你觉得这篇文章帮你省下了加班时间，

就 点赞 + 收藏 + 转发 吧！

你的支持，是我继续造轮子的动力 💪