如何使用 pdfmake 将 HTML 动态表格高质量导出为 PDF_技术教程

本文介绍如何基于 pdfmake 库，将 javascript 动态生成的复杂 html 表格（含下拉选择框、跨列表头、样式化单元格）精准、美观地导出为可打印的 pdf 文件，解决 csv 转 pdf 排版失真问题。

在团队任务排班场景中，一个结构清晰、样式统一的周任务表（如 15 人 × 7 天 × 3 班次 = 315 单元格）需定期打印张贴。直接用 jsPDF.text() 导入 CSV 文本会导致表格完全丢失行列结构；而 pdfmake 专为“数据驱动 PDF”设计，支持原生表格布局、分页、样式定制与多语言字体（通过 vfs_fonts.js），是当前最稳健的前端表格导出方案。

以下为完整、可直接集成的 exportPDF() 函数实现（已适配您原始代码中的动态生成逻辑）：

function exportPDF() {
  const rows = document.querySelectorAll("#timetable tr");
  const tableData = [];

  // 遍历每行，提取单元格内容（兼容 th 和 td，自动识别 select 值）
  rows.forEach(row => {
    const rowData = [];
    const cells = row.querySelectorAll("td, th");

    cells.forEach(cell => {
      const select = cell.querySelector("select");
      const text = select ? select.value : cell.innerText.trim();
      // 为表头和数据添加语义化样式标识
      const isHeader = cell.tagName === "TH";
      rowData.push({
        text: text || "—", // 空单元格显示占位符
        style: isHeader ? "tableHeader" : "tableData",
        bold: isHeader,
        alignment: isHeader ? "center" : "center"
      });
    });
    tableData.push(rowData);
  });

  // 构建 pdfmake 文档定义
  const docDefinition = {
    pageOrientation: 'landscape', // 横向适配宽表
    pageSize: 'A4',
    header: { text: 'Weekly Task Distribution Board', fontSize: 16, bold: true, alignment: 'center', margin: [0, 10, 0, 20] },
    footer: (currentPage, pageCount) => ({
      text: `Generated on ${new Date().toLocaleDateString()} | Page ${currentPage} of ${pageCount}`,
      alignment: 'center',
      fontSize: 9,
      margin: [0, 10, 0, 0]
    }),
    content: [{
      style: 'tableExample',
      table: {
        headerRows: 2, // 前两行为表头（Days + Hours 行）
        widths: ['auto', ...Array(21).fill('*')], // 第一列固定宽，其余均分（7天×3班次=21列）
        body: tableData
      },
      layout: {
        fillColor: (rowIndex) => rowIndex % 2 === 0 ? '#E6E6FA' : null,
        hLineColor: () => '#ddd',
        vLineColor: () => '#ddd',
        hLineWidth: () => 0.5,
        vLineWidth: () => 0.5
      }
    }],
    styles: {
      tableExample: {
        margin: [0, 10, 0, 15]
      },
      tableHeader: {
        fillColor: '#006699',
        color: 'white',
        fontSize: 10,
        padding: 6
      },
      tableData: {
        fontSize: 9,
        padding: 4,
        fillColor: '#FFFFFF'
      }
    }
  };

  // 触发下载（自动处理字体、分页、样式）
  pdfMake.createPdf(docDefinition).download('Task_Distribution_Board.pdf');
}

关键优化说明：
✅ 智能表头识别：自动区分

与，应用不同样式（深蓝背景+白字 vs 白底黑字）；
✅ 响应式列宽：widths 数组精确匹配您的 1 列姓名 + 21 列班次（7天×3时段），避免文字挤压换行；
✅ 视觉一致性：复用您 CSS 中的 #E6E6FA（薰衣草色）作为偶数行背景，保持与网页一致的视觉体验；
✅ 专业排版：横向 A4 页面 + 页眉页脚 + 边框线 + 合理内边距，确保打印后清晰易读；
✅ 空值容错：text || "—" 防止空白单元格导致 PDF 渲染异常。

注意事项：