html内容动态分页,且每一页带有header和footer，大佬们有什么好的建议吗？

Question

用html实现类似于word那样分页，当前技术栈是用的vue,每一页（每一页都有一个最大高度）的结构都如下图：

header:是一个写死的内容
footer:这里是直接通过后端传过来的内容使用v-html渲染的（每一页的footer和header都是相同内容）
body:通过后端传来的具体数据进行渲染，里面有很多表格，就是当表格的数据过多，导致第一页放不下了，需要把剩余的内容到下一页，以此类推
最终用户会在这个页面使用浏览器的打印来打印出这些内容.
希望大佬们支招

Answer 1

一般来说我会借助这个 vue-print-nb 这个库来实现打印功能呢。

页头页尾可以使用 position:fixed 去固定，如果说你要定制化复杂页头页尾的话。
并且借助 @page 属性去留出上下的空白部分。预览的时候不需要去管是否是按照每一个页单独的去预览。

然后打印时期使用 page-break 去断页，以及使用 break-before 和 break-after 来保证一些内容元素不会被分页而突然分隔开。

一些具体的部分可以借鉴我的这一篇笔记 HTML API + CSS 控制页面打印内容和样式 ，只不过没有提到页头页尾的实现。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

可以考虑这个库pagedjs
https://pagedjs.org/documentation/7-generated-content-in-marg...