html内容动态分页,且每一页带有header和footer,大佬们有什么好的建议吗?
用html实现类似于word那样分页,当前技术栈是用的vue,每一页(每一页都有一个最大高度)的结构都如下图:
header:是一个写死的内容
footer:这里是直接通过后端传过来的内容使用v-html渲染的(每一页的footer和header都是相同内容)
body:通过后端传来的具体数据进行渲染,里面有很多表格,就是当表格的数据过多,导致第一页放不下了,需要把剩余的内容到下一页,以此类推
最终用户会在这个页面使用浏览器的打印来打印出这些内容.
希望大佬们支招
回答:
一般来说我会借助这个 vue-print-nb 这个库来实现打印功能呢。
页头页尾可以使用 position:fixed
去固定,如果说你要定制化复杂页头页尾的话。
并且借助 @page
属性去留出上下的空白部分。预览的时候不需要去管是否是按照每一个页单独的去预览。
然后打印时期使用 page-break
去断页,以及使用 break-before
和 break-after
来保证一些内容元素不会被分页而突然分隔开。
一些具体的部分可以借鉴我的这一篇笔记 HTML API + CSS 控制页面打印内容和样式 ,只不过没有提到页头页尾的实现。
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回答:
可以考虑这个库pagedjs
https://pagedjs.org/documentation/7-generated-content-in-marg...
以上是 html内容动态分页,且每一页带有header和footer,大佬们有什么好的建议吗? 的全部内容, 来源链接: utcz.com/p/933779.html