shuangying0001-beep/canvas-multipage-pdf

Canvas 多页 PDF 导出

教备神器 · 工具模块。纯前端，jsPDF 经 CDN 引入。

这是什么（给人看）

字帖、作业纸、表格画好了，但要打印成册，一张张存图太麻烦。本技能把多页 Canvas 一键合成为标准 A4 PDF——自动页码、自动分页、不超 10 页上限，下载即打印。老师出练习卷、家长印字帖册都好用。

• 已附 selftest.js：验证页码检测/分页/切片逻辑，PASS 才算靠谱。

何时使用

• "把这几页导出成 PDF" / "生成可打印的 A4"
• 模板带页码（多页连续编号）
• 输入超出单页，需要自动分页

关键参数（AI 必读）

• A4 内部尺寸固定 1240×1754（150dpi）；jsPDF unit:'px', format:[1240,1754]。
• 图片质量 toDataURL('image/jpeg', 0.95)。
• 硬上限 10 页：超出弹窗确认，截断到 10 页。

核心函数签名（AI 直接调用）

// 页码元素检测：模板是否支持多页页码
PdfExport.hasPageNoFlag(elements)            // -> true/false

// 分页容量：{ pages, overLimit }
PdfExport.estimatePages(totalCells, cellsPerPage, maxPages=10)

// 逐页切片（输入分配到第 pageNo 页）
PdfExport.sliceSequential(input, pageNo, cellsPerPage)  // 跳过 \r\n
PdfExport.sliceByRow(input, pageNo, rows)

// 合成多页 PDF（需 jsPDF 环境）
// pages: [{ dataURL }] 或 canvas 数组
var doc = PdfExport.composePDF(pages, { pageSize:[1240,1754], quality:0.95 });
doc.save('学习用纸.pdf');   // 浏览器触发下载

导出流程

1. hasPageNoFlag → 是否需要页码控件
2. 循环 i=1..pageCount：drawAll({pageNo:i}) → canvas.toDataURL('image/jpeg',0.95) → 收集
3. composePDF(pages) → doc.save()
4. 单页/无页码模板：保持原 PNG 下载行为

反例（避免）

• ❌ 直接 doc.addImage 不先 addPage：第一页后内容叠在同一页。
• ❌ 尺寸用 mm 而 canvas 是 px：jsPDF unit 必须 'px' 且 format 用 [1240,1754]。
• ❌ 超 10 页不提示：先 estimatePages 判 overLimit，弹窗确认再截断。

自测

node references/selftest.js   # 验证页码检测/分页/切片，PASS 方可交付

引用文件

• references/pdf-export.js — 页码检测 + 分页 + 切片 + 合成（UMD）
• references/selftest.js — Node 自测（纯逻辑，无需 jsPDF）

注意事项

• composePDF 需 jsPDF：浏览器 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js">；Node npm i jspdf。
• 微信小程序无 jsPDF：先 wx.canvasToTempFilePath 出每页图，再到 web-view/后端合 PDF，或复用本逻辑在前端页合成。
• 与 canvas-grid-engine / svg-to-canvas-replica 互补：本技能负责"出 PDF"，前两者负责"画/复刻"。

教备神器 Canvas 工具链（组合使用）

本技能是「教备神器 · Canvas 工具链」的一环，四件组合覆盖「画 → 复刻 → 导出 → 验证」完整闭环：

• Canvas 学习纸网格引擎（画）：13 种教育网格 + 汉字居中 + 拼音标注，生成米字格/田字格字帖。
• SVG 转 Canvas 复刻引擎（复刻）：把现有纸质模板 SVG 零误差复刻成可改字、可打印的 Canvas。
• Canvas 多页 PDF 导出（导出）：多页 Canvas 一键合成标准 A4 PDF 直接打印。
• 小程序 Canvas 验证工作流（验证）：本地预览 + 截图视觉回归，杜绝格子歪、字偏。

完整方案与演示见「教备神器 Canvas 工具链落地页」（链接发布后回填）。