-pdflisted

# 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 直接调用） ```javascript // 页码元素检测：模板是否支持多页页码 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`，弹窗确认再截断。 ## 自测 ```bash node references/selftest.js # 验证页码检测/分页/切片，PASS 方可交付 ``` ## 引用文件 - `references/pdf-export.js` — 页码检测 + 分页 + 切片 + 合成（U