Layui中页面怎么调用打印?我建议用JS原生直接打

大家都是Layui在Laydate中是调用了打印的,但是页面中却没有相关的调用,如果我们需要打印怎么办呢?

网上给了很多方法,通过实践,我发现简单快捷的还是JS原生打印。

一、定义打印区域

这是我准备打印的代码:

上方的代码中

通过这样设置来限制打印区域

二、调用打印

在JS代码中定义如上代码即可console.log($(“li:last”));是我用来做接下来判断的,这里忽略即可,只用点击事件调用Print()。

整体打印是带着当前页面样式的,所以美观性也能得到保障。

三、补充说明

如果按照上方代码对应操作,你现在应该是能打印出来内容了,那么关于JS原生打印,其实还有一些细节,这里做一下分享。

打印标题

有时候我们需要定义打印的标题,则需要定义一个title,即可:

监听打印事件

有两个事件可以监听到到打印事件,一个是onbeforeprint(),一个是onafterprint(),分别表示打印事件触发前后。

检测打印请求,提供一个打印前的处理事件onbeforeprint() 将一些不需要打印的元素隐藏,和打印后的处理事件 onafterprint()放开隐藏的元素。

插入分页

page-break-before(指定元素前添加分页符)

描述
auto默认值。如果必要则在元素前插入分页符。
always在元素前插入分页符。
avoid 避免在元素前插入分页符。
left在元素之前足够的分页符,一直到一张空白的左页为止。
right 在元素之前足够的分页符,一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-before 属性的设置。

page-break-after(指定元素后添加分页符)

参数同page-break-before。

page-break-inside(用于设置是否在指定元素中插入分页符)

描述
auto默认。如果必要则在元素内部插入分页符。
avoid避免在元素内部插入分页符。
inherit规定应该从父元素继承 page-break-inside 属性的设置。

需要注意的是,使用分页:

  1. 不能对绝对定位的元素使用以上三种分页属性。
  2. 请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

设置打印布局(横向、纵向、边距)

这个需要在样式中来定义,参考样式如下:

去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息,展现到页面外边距范围,我们可以通过去除页面模型page的外边距,使得内容不会延伸到页面的边缘,再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距。

同样,这个也是要在样式中定义,或者由用户自行设置打印实现。

参考代码如下:

以上,就是JS原生打印的方法和一些技巧,希望能有所帮助,如有遗漏的,欢迎补充。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/10774

(1)
上一篇 2022年3月4日 上午11:48
下一篇 2022年3月11日 下午4:02

相关推荐

发表评论

登录后才能评论