投稿
  1. 蓝洛水深Home
  2. 教程
  3. 系统

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

蓝洛水深 • • 系统, 网站 • 3467 views

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

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

一、定义打印区域

这是我准备打印的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="layui-fluid layui-form" id="LAY-component-grid-mobile-pc">
    <!--startprint-->  
    <title>流程查看</title>
    <div class="layui-row layui-col-space10 printContent">
      <div class="layui-col-xs12 layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">流程审批</div>
          <div class="layui-card-body" id="workflow">
            <div class="layui-form-item">
              <label class="layui-form-label">流程类型</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" name="workflow_type" value="{$workflowInfo.workflow_type}">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">申请类型</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" name="workflow_type" value="{$workflowInfo.apply_type}">
              </div>
            </div>
            {$workflowInfo.detail}
          </div>
        </div>
      </div>
      <div class="layui-col-xs12 layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">审批流程</div>
          <div class="layui-card-body" id="workflow_right_content">
            <div id="right_content">
              <ul class="layui-timeline">
                {volist name="timeline" id="vo"}
                <li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis {$vo.state}"></i>
                  <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">{$vo.title}</h3>
                    <p>{$vo.content}</p>
                  </div>
                </li>
                {/volist}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--endprint-->
    <div class="layui-form-item">
      <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
          <div class="layui-footer" style="left: 0;">
            <button type="button" class="layui-btn print">打印</button>
            <button type="button" class="layui-btn layui-btn-warm" data-type="close" id="close">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>

上方的代码中

1
2
3
<!--startprint-->
打印的区域
<!--endprint-->

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

二、调用打印

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 打印
      layui.$('.print').on('click', function () {
        console.log($("li:last"));
        console.log('print');
        Print()
      });
      function  Print(){
        bdhtml = window.document.body.innerHTML;  
        sprnstr = "<!--startprint-->";  //开始打印标识字符串有17个字符
        eprnstr = "<!--endprint-->";    //结束打印标识字符串
        prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);  //从开始打印标识之后的内容
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));  //截取开始标识和结束标识之间的内容
        window.document.body.innerHTML = prnhtml;  //把需要打印的指定内容赋给body.innerHTML
        window.print();  //调用浏览器的打印功能打印指定区域
        location.reload();  //重新给页面内容赋值；
      }

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

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

三、补充说明

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

打印标题

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

1
<title>流程明细凭证</title>

监听打印事件

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

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

1
2
3
4
5
6
window.onbeforeprint = function(event) {
      //将一些不需要打印的元素隐藏
    };
    window.onafterprint = function(event) {
      //放开隐藏的元素
    };

插入分页

page-break-before（指定元素前添加分页符）

值描述
auto默认值。如果必要则在元素前插入分页符。
always在元素前插入分页符。
avoid 避免在元素前插入分页符。
left在元素之前足够的分页符，一直到一张空白的左页为止。
right 在元素之前足够的分页符，一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-before 属性的设置。
1
2
3
4
* 在h1元素前始终插入分页符 */
@media print {
    h1 {page-break-before: always;}
}

page-break-after（指定元素后添加分页符）

参数同page-break-before。

1
2
3
4
/* 在 .footer 元素后始终插入分页符 */
@media print {
    .footer {page-break-after: always;}
}

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

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

需要注意的是，使用分页：

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

设置打印布局（横向、纵向、边距）

这个需要在样式中来定义，参考样式如下：

1
2
3
4
5
6
7
8
9
10
11
@media print {
    @page {
      /* 纵向 */
      size: portrait;
      /* 横向 */
      size: landscape;
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }

去除浏览器默认页眉页脚

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

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

参考代码如下：

1
2
3
4
5
6
7
8
@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

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

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

Like (1)
蓝洛水深的头像蓝洛水深管理员
0 0 Donate 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Previous 2022年3月4日 上午11:48
Next 2022年3月11日 下午4:02

相关推荐

发表回复

Please Login to Comment
联系QQ
联系QQ
SHARE
TOP