使用jsPDF生成PDF需合理设计文档结构，通过模块化函数组织页眉页脚、内容区域及分页逻辑，结合html2canvas或autoTable插件处理复杂布局，利用坐标系统控制文本对齐、表格绘制与图片嵌入，实现专业排版。
生成 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），但支持自定义字体和基本样式设置。
立即学习“Java免费学习笔记（深入）”；
-
字体设置：通过
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 文档。
