---
name: Canvas 多页 PDF 导出
display_name: 多页PDF导出器
description: 将多页 Canvas 合成为可下载的 A4 PDF。含页码元素检测（footer-text+纯数字）、分页容量估算（硬上限 10 页）、逐页输入切片（sequential/row/col 模式，跳过\r\n）、jsPDF 多页合成（A4 1240×1754 @150dpi，JPEG 0.95）。触发词：导出 PDF/打印 canvas/生成 A4/多页导出/canvas 转 pdf。纯前端，jsPDF 经 CDN 引入，浏览器与微信小程序（先出图再合 PDF）通用。
market_desc: 教备神器出品的【Canvas 多页 PDF 导出】：练字帖、作业纸、表格画好后，一键把多页 Canvas 合成标准 A4 PDF 直接下载打印。自动页码、自动分页、不超限，老师家长出练习卷/字帖册的神器，告别一张张存图。
version: 1.0.0
author: 教备神器
tags: [canvas, pdf, 导出, 打印, a4, 多页]
---

# 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` — 页码检测 + 分页 + 切片 + 合成（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 工具链落地页」（链接发布后回填）。