web打印工具，为页面添加页眉页脚页码，正确将

web打印工具，为页面添加页眉页脚页码，正确将页面分页。 思路是将某dom内的所有节点重新按照符合A4纸大小的页面排版。

import PrintLayouter from 'print-kit';

为groupContainer内的dom指定角色（这将决定layout重排时如何对待dom）

执行排版函数：

PrintLayouter.layout( 'div[data-paged="group-container"]', '#layoutedContainer', true, () => { window.print(); }, );

layout函数参数解释

/** * * @param {指定print-kit要重排的dom容器data-paged="group-container"} groupContainer * @param {指定重排后的dom放置在哪里} layoutedContainer * @param {重排后的回调} callback * @param {打印方向} mode 横向-horizontal 纵向-vertical */ layout(groupContainer, layoutedContainer, isPagedByGroup, callback) { // ... } dom角色解释 group 组，一次打印可以只有一组页面，也可以有多组页面。每组页面具有独立的页眉页脚分页等部件。 page-header 页眉，需放在group中指定 page-footer 页脚，需放在group中指定 mini-block 不会被分页拆分的最小单位块，当前页面空间不容纳mini-block时，会整体放在下一页 mini-block-tail 最小单位块的尾巴，总会与最小单位块同页展示 group-header 组信息块的头部，需放在group中指定。不同于page-header，group-header是组的标题 page-table 页面中的表格，会对表格元素做特殊处理，如跨页的表格拆分等问题 page-table-tail 表格的尾巴，总会与表格同页展示，若page-table的tr正好占满了某一页导致page-table-tail必须分页时，此时page-table-tail会将table的最后几行tr放在第二页显示 分页页码添加方式

在打印页面时，希望能够标注出页码信息，结合实际业务场景，页码的标注方式有两类，一类是按照总体纸张数量标注页码，另一类是按照group来分开标注页码，（或者两者同时都需标注）

在group节点内，书写具有规定属性的节点即可：

<div data-page-info style={{ textAlign: 'right', position: 'relative', bottom: 0, right: 0, }} > 当前组页码： <span data-page-group-cur /> / <span data-page-group-total /> <span className="mr20" /> 总页码： <span data-page-cur /> / <span data-page-total /> </div>

打印工具会自动将页码信息显示在对应的位置。

@page { size: auto; /* auto is the initial value / margin: 5mm; / this affects the margin in the printer settings */ } 打印区域的宽度设置为： width: 200mm;