可分页 HTML shtml
约 702 字大约 2 分钟
...
2026-09-28
插件说明
@sv-print/plugin-ele-shtml 可分页 HTML 打印元素插件：将任意 HTML 长内容按纸张高度自动分页。采用层级式分页：先把 DOM 扁平化（flattenContents），再按 paperFooter 高度逐节点切页；tr 节点自动补 thead/tfoot，保证跨页表格头尾正确。
无第三方依赖。
npm install @sv-print/plugin-ele-shtml示例代码
import pluginEleShtml from '@sv-print/plugin-ele-shtml';
const plugins = [pluginEleShtml({})];
await hiprint.register({ plugins }); // 须在创建模板/打开设计器之前内容取值优先级：field 绑定数据 > options.content > formatter 返回值 > testData / title。
高级用法
元素参数
| 参数 | 说明 |
|---|---|
shtmlMode | 分页方式：1（尝试下页）、2（当前页） |
filterNodes | 整体节点（分页不可切断），逗号分隔标签名，默认 tr,th,td |
filterNodesFormatter | 节点过滤函数 (node) => boolean |
shtmlTableHeaderRepeat | 表格头显示：page（每页）/ first（首页） |
shtmlTableFooterRepeat | 表格脚显示：page（每页）/ last（最后） |
shtmlBreak | 分页处理函数 (target, htmlStr, node) => boolean |
shtmlBeforeBreak | 分页前处理函数 |
shtmlRender | 渲染处理函数 (tempContent, target, element, elements, isNewPage, paperNo, options, templateData, rootData) => target |
shtmlBeforeBreak 分页前处理
节点高度放不下、即将分页那一刻触发，用于在分页前对大 DOM 细分或截断（如把大节点拆成子节点继续装填本页，减少留白）：
function (target, node, children, tempContent, paperNo, options, templateData, rootData, utils) {
// children 是"当前节点及其后所有待装填节点"的数组引用（从当前节点开始）
// 细分大 DOM：把当前节点展开为壳+子孙，替换进 children，继续装填本页
children.splice(0, 1, ...utils.flattenNode(node));
return true; // 返回 true=已处理并继续装填本页；否则按默认逻辑分页
// 截断当前节点：children.shift(); return true;
// 截断剩余所有：children.length = 0; return true;
// 替换节点：children.splice(0, 1, utils.makeItem($node1), utils.makeItem($node2)); return true;
}说明：
- 仅在「高度放不下」时触发；
shtmlBreak显式分页不触发 utils.flattenNode(node)：展开节点为【壳+子孙】数组（父节点存空壳保留父链，叶子存真实节点），独立 id 空间utils.makeItem($node)：把 jQuery/DOM 节点包装为 children 数组项- 内置防死循环保护：处理函数无实际进展时自动跳过并走默认分页
版权所有
版权归属：sv-print