本文介绍如何基于 pdfmake 库，将 javascript 动态生成的复杂 html 表格（含下拉选择框、跨列表头、样式化单元格）精准、美观地导出为可打印的 pdf 文件，解决 csv 转 pdf 排版失真问题。
在团队任务排班场景中，一个结构清晰、样式统一的周任务表（如 15 人 × 7 天 × 3 班次 = 315 单元格）需定期打印张贴。直接用 jsPDF.text() 导入 CSV 文本会导致表格完全丢失行列结构；而 pdfmake 专为“数据驱动 PDF”设计，支持原生表格布局、分页、样式定制与多语言字体（通过 vfs_fonts.js），是当前最稳健的前端表格导出方案。
以下为完整、可直接集成的 exportPDF() 函数实现（已适配您原始代码中的动态生成逻辑）：
<!-- 确保已引入 pdfmake（含字体） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/vfs_fonts.js"></script>
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');
}关键优化说明：
✅ 智能表头识别：自动区分 <th> 与 <td>，应用不同样式（深蓝背景+白字 vs 白底黑字）；
✅ 响应式列宽：widths 数组精确匹配您的 1 列姓名 + 21 列班次（7天×3时段），避免文字挤压换行；
✅ 视觉一致性：复用您 CSS 中的 #E6E6FA（薰衣草色）作为偶数行背景，保持与网页一致的视觉体验；
✅ 专业排版：横向 A4 页面 + 页眉页脚 + 边框线 + 合理内边距，确保打印后清晰易读；
✅ 空值容错：text || "—" 防止空白单元格导致 PDF 渲染异常。
注意事项：
- 若表格内容超长需自动分页，pdfmake 默认支持，无需额外配置；
- 中文支持需替换 vfs_fonts.js 为含中文字体的版本（如 roboto + simhei），否则中文会显示为方块；
- 生产环境建议将 pdfmake 本地化部署，避免 CDN 不可用风险；
- 后续添加“Remarks”列时，只需在 names 循环中追加一列 <td><input type="text"></td>，上述逻辑会自动捕获其 value。
至此，您只需点击按钮，即可获得一份与屏幕所见高度一致、适合张贴的印刷级 PDF——真正告别铅笔与纸张，让数字化协作落地无声却高效。
立即学习“前端免费学习笔记（深入）”；
