原生js 打印 以及 自定义页眉页脚的一些感悟

最近遇到一些需求使用原生js进行打印，期间遇到很多困难，我过资料查找用了自己的一些方法解决，如果你有更好的解决办法欢迎评论区留言。

问题一

打印元素父盒子设置了溢出隐藏，导致元素隐藏了，打印不完整。

我的解决办法是利用局部打印，table-view是父盒子

let html = document.querySelector('.table-view').innerHTML;window.document.body.innerHTML = html;window.print();

问题二

打印的需求是固定表头每个分页都有

我的办法是给thead加上display:table-header-group，如图所示每个分页会自动加上表头。

问题三

隐藏不需要打印的元素

我的解决办法是给style 设置 media=“print” 表示于打印情况生效的样式，给不需要的元素设置隐藏就行了。

<style media="print">.noprint{display: none;}</style>

问题四

需求要求默认打印为 a3格式 横向

我的解决办法是 使用@page size第一个参为纸张尺寸，第二个为方向。

<style media="print">@page { size: A3 landscape; }</style>

问题五

需求是要在打印的纸张上显示页码，但不需要页眉和地址,但谷歌浏览器只支持全选页眉和页脚。

我一开始是想利用表格table的thead,tfoot但是打印的时候内容会直接在表格后面，不会在页面底部。

后来发现页眉页脚块设置为固定定位，然后往里面填你需要显示的内容就行。

注意：tfoot一定要占据一定空间,要不然打印的底部边距空间不够，没有地方放页脚。

<tfoot><tr><td><div class="footer-space">&nbsp;</div></td></tr></tfoot>