帐篷式台牌生成器：批量打印技术文档

开会、培训、接待——桌上的姓名台牌是刚需。手写太慢，Word 排版太丑，批量打印还要一个个复制粘贴。台牌生成器把这件事变成 3 秒搞定：输入姓名 → 生成 A4 页面 → 直接打印，帐篷式折叠即用。

一、核心问题：台牌打印为什么麻烦？

传统做法是用 Word 或 PPT 手动排版，一个个输入姓名、调整字号、对齐位置。10 个人的会议还好，100 人的培训就崩溃了——重复劳动、格式不统一、换个人名字就要重新排版。

二、台牌生成器：一个 HTML 搞定一切

纯前端实现，零依赖安装（仅引入 XLSX.js 用于 Excel 解析）。打开 HTML → 输入姓名或上传 Excel → 生成 → 打印。整个流程不超过 10 秒。

三、技术实现

四、功能模块详解

4.1 单个生成 — 输入即出

最简单的使用场景：输入一个姓名，点击生成，直接得到一张可打印的 A4 台牌页面。支持自定义字体、字号和字间距。

4.2 批量生成 — Excel 一键导入

上传 Excel 文件（.xlsx / .xls / .csv），自动识别工作表和列头，选择姓名所在列，一键生成所有台牌。这是最常用的场景——HR 给你一份名单，3 秒出一摞台牌。

4.3 打印输出 — A4 帐篷式设计

每张 A4 页面（210mm × 297mm）包含一个台牌的正反两面。沿中线对折后形成帐篷式台牌，两面都能看到姓名。页面用 SVG 绘制裁切线，打印时选择"无边距"即可。

4.4 在线编辑 — 打印前微调

生成后的台牌支持 contenteditable 在线编辑。如果发现某个名字需要微调（比如加空格、改字），直接点击台牌上的文字就能修改，无需重新生成。

五、样式配置详解

台牌生成器提供了丰富的样式配置项，让你的台牌既好看又专业。

六、核心代码解析

6.1 姓名格式化 — 智能加空格

根据姓名字数自动应用不同的字间距，让台牌上的文字均匀分布：

function formatName(name, s2, s3, s4) {
  name = name.trim();
  if (name.length <= 1) return name;
  // 根据字数选择对应间距
  const sp = ({2:s2, 3:s3})[name.length] ?? s4;
  // 每个字之间插入指定数量的空格
  return name.split('').join(' '.repeat(sp));
}

// 示例：
formatName('张三', 3, 1, 0);  // → "张   三"
formatName('张三丰', 3, 1, 0); // → "张 三 丰"
formatName('欧阳修', 3, 1, 0); // → "欧阳修"

6.2 A4 页面生成 — SVG + HTML 混合

每张 A4 页面用 SVG 绘制裁切边框，用 HTML contenteditable 实现可编辑文字：

function makeCardPage(nameHtml, fontFamily, fontSize) {
  const div = document.createElement('div');
  div.className = 'page';  // 210mm × 297mm
  div.innerHTML = `
    <svg viewBox="0 0 210 297">
      <line x1="5" y1="48.5" x2="205" y2="48.5"/>   <!-- 上边框 -->
      <line x1="5" y1="248.5" x2="205" y2="248.5"/>  <!-- 下边框 -->
    </svg>
    <div class="edit-overlay">
      <div class="editable front" contenteditable="true">
        ${nameHtml}    <!-- 正面姓名 -->
      </div>
      <div class="editable back" contenteditable="true">
        ${nameHtml}    <!-- 背面姓名（倒置） -->
      </div>
    </div>`;
  return div;
}

6.3 Excel 解析 — XLSX.js 驱动

使用 XLSX.js 库解析上传的 Excel 文件，支持 .xlsx、.xls、.csv 三种格式：

function handleFile(file) {
  const reader = new FileReader();
  reader.onload = e => {
    // 解析 Excel 工作簿
    workbook = XLSX.read(e.target.result, {type:'array'});
    // 填充工作表下拉列表
    sheetDropdown.innerHTML = workbook.SheetNames
      .map((n,i) => `<option value="${i}">${n}</option>`).join('');
    loadSheet(0);
  };
  reader.readAsArrayBuffer(file);
}

function loadSheet(idx) {
  // 将工作表转为二维数组
  currentSheet = XLSX.utils.sheet_to_json(
    workbook.Sheets[workbook.SheetNames[idx]],
    {header: 1}
  );
  renderColumns();  // 渲染列选择器
}

6.4 打印优化 — CSS @media print

通过 CSS 媒体查询，在打印时隐藏工具栏、锁定编辑区域、设置 A4 页面尺寸：

@media print {
  @page { size: A4; margin: 0; }
  /* 隐藏所有非打印元素 */
  .mode-panel, .panel, .toolbar { display: none !important; }
  /* 显示打印区域 */
  .print-area { display: block !important; }
  /* 锁定编辑区域，防止误操作 */
  .editable {
    -webkit-user-modify: read-only !important;
    caret-color: transparent !important;
    cursor: default !important;
  }
  /* 每张页面自动分页 */
  .page { page-break-after: always; }
  .page:last-child { page-break-after: auto; }
}

七、使用指南

单个生成

1. 打开 HTML 文件，点击「单个生成」
2. 在样式设置中选择字体、字号、字间距
3. 输入姓名，点击「生成台牌」
4. 在预览页面检查效果，可直接点击文字修改
5. 点击「🖨️ 打印」，选择"无边距"打印
6. 沿中线对折，帐篷式台牌完成 ✅

批量生成

1. 点击「批量生成」，上传 Excel 文件
2. 选择工作表（如有多个）
3. 点击姓名所在列的列头
4. 预览前 10 个名字，确认无误
5. 调整字体和字间距（可按字数分别设置）
6. 点击「批量生成台牌」
7. 在打印页面逐页检查，或直接打印全部

八、应用场景

九、设计总结

• 零安装零依赖：一个 HTML 文件，浏览器打开即用，无需安装任何软件
• 双模式灵活切换：单个生成适合临时需求，批量生成适合大型活动
• 智能字间距：按字数自动适配间距，2 字、3 字、4 字名字都能对称美观
• 在线编辑能力：生成后可直接点击修改，无需重新生成
• 打印友好设计：CSS @media print 精确控制输出，SVG 裁切线清晰
• Excel 无缝对接：支持 .xlsx / .xls / .csv，自动识别表头和数据