目前对于网页的页眉页脚打印方面，浏览器还有很大的不足。之前可能有一些 借助css固定fixed位置或 flexlayout 的解决方案，但是效果都不太理想。
但在最近chrome对table打印的更新中，增加了对 <thead> <tfoot> <th> 等元素的优化支持，表格中的标题和内容会被截断的问题解决了。 其实我们可以用这个特性来简单地实现页眉页脚的打印。
这是网页中HTML元素与打印的简单对应关系：
______________________
| thead | 页眉
|______________________|
| |
| | 内容
| tbody |
| |
| |
|______________________|
| tfoot | 页脚
|______________________|
HTML代码示例:
<table class="table table-print"><thead><tr><th colspan="2"><h1>这是页头？</h1></th></tr><tr><th>列1</th><th>列2</th></tr></thead><tbody><tr><td>FOX JUMP A RIVER</td><td>GO AWAY</td></tr></tbody><tfoot><tr><td colspan="2"><h3>这是页脚</h3></td></tr></tfoot></table>
生产环境中测试的效果：
目前用Chrome打印时发现的一些问题：
1) 只有当table的内容超过一页时 thead 和 tfoot 才会起作用。
2) 当内容比一页纸短时，tfoot中的内容并不会显示在页面最下方。
3) 当有很多页时最后一页的tfoot也不会显示在页面最下方页脚位置
总体来说，效果比之前已经好很多，都还可以接受。网页上已经基本能够实现和打印机软件差不多的效果.
回复 (0)
微信扫码 立即评论
