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

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

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

❝

“最近面试的人多，我们的 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：

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

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

🚀 七、使用场景

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

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

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

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

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

🌟 开源地址

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

AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding