0
点赞
收藏
分享

微信扫一扫

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

律楷粑粑 2022-03-10 阅读 97

最近遇到一些需求使用原生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"></div>
</td>
</tr>
</tfoot>
举报

相关推荐

0 条评论