JavaScript生成PDF：结构与样式优化技巧

本文深入解析了使用 JavaScript（特别是 jsPDF）在前端高效生成专业级 PDF 文档的核心实践，聚焦于文档结构设计与精细样式排版两大关键挑战：通过模块化函数组织页眉页脚、内容区块与智能分页逻辑，结合 html2canvas 或 autoTable 插件应对复杂布局，利用坐标系统精准控制文本对齐、表格绘制、图片嵌入及跨页处理，并提供实用代码技巧（如居中计算、段落封装、字体管理），助开发者轻松应对报表、合同、发票等真实业务场景中的高质量 PDF 输出需求。

生成 PDF 文档在前端开发中非常常见，尤其在报表、合同、发票等场景下。使用 JavaScript 生成 PDF 时，核心挑战在于文档结构组织和样式排版控制。目前主流方案是使用 jsPDF 配合 html2canvas 或直接通过 jsPDF 的 API 构建内容。

1. 文档结构设计：分层与模块化

一个清晰的 PDF 文档应具备合理的结构划分，便于维护和样式控制。

• 页眉与页脚：包含标题、页码、公司信息等固定元素，可通过 jsPDF 的 setY() 和 text() 方法在每页顶部或底部绘制。
• 内容区域：正文部分建议按模块拆分，如用户信息、表格数据、备注说明等，每个模块独立封装为函数，提升可读性。
• 分页逻辑：当内容超出当前页高度时，需手动调用 addPage() 并重置 Y 坐标，避免内容被截断。

示例：定义一个段落模块函数

function addSection(doc, title, content, y) {
  doc.setFont("bold");
  doc.text(title, 20, y);
  doc.setFont("normal");
  doc.text(content, 20, y + 10);
  return y + 30; // 返回下一个模块起始位置
}

2. 样式排版：字体、间距与对齐

jsPDF 默认使用标准字体（如 Helvetica），但支持自定义字体和基本样式设置。

• 字体设置：通过 setFont("helvetica")、setFontStyle("bold") 控制字体类型和粗细。
• 文本对齐：jsPDF 不直接支持右对齐或居中，需计算字符串宽度后手动调整 X 坐标。可用 getTextWidth(str) 辅助定位。
• 行高与段落：多行文本需循环调用 text()，每次 Y 坐标增加行高（如 10pt）。
• 颜色与边框：使用 setTextColor(r,g,b) 和 setDrawColor() 设置文字与线条颜色。

居中对齐实现技巧

function addCenteredText(doc, text, y) {
  const pageWidth = doc.internal.pageSize.getWidth();
  const textWidth = doc.getTextWidth(text);
  const x = (pageWidth - textWidth) / 2;
  doc.text(text, x, y);
}

3. 表格与复杂布局处理

表格是 PDF 排版中最常见的复杂结构，推荐使用 jsPDF-AutoTable 插件。

• 自动列宽：autoTable 可根据内容自动调整列宽，也可手动指定 columnStyles。
• 跨行跨列：虽不完全支持 colspan/rowspan，但可通过 didDrawCell 钩子绘制合并单元格的假象。
• 表头与分页：autoTable 自动处理表头重复和跨页断行，极大简化开发。

使用 autoTable 生成表格

doc.autoTable({
  head: [['姓名', '年龄', '城市']],
  body: [
    ['张三', '28', '北京'],
    ['李四', '32', '上海']
  ],
  startY: 50
});

4. 图片与混合内容嵌入

图像能显著提升文档可读性，但需注意尺寸与格式兼容性。

• 图片格式：仅支持 JPEG 和 PNG，需确保 base64 编码正确。
• 尺寸控制：使用 addImage(imgData, format, x, y, width, height) 显式设置宽高，避免失真。
• 图文混排：先绘制图像，再在其周围添加文本说明，注意坐标系统协调。

基本上就这些。掌握结构划分、样式控制、插件协作和坐标管理，就能高效生成专业级 PDF 文档。

好了，本文到此结束，带大家了解了《JavaScript生成PDF：结构与样式优化技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！