js实现页面的打印

利用浏览器中自带的 window.print() 方法

(1) 实现整个页面的打印直接点击调用这个方法即可
(2)实现局部页面的打印时,首先要加开始打印位置以及打印结束位置的标注,我们只需截取两者中间的部分进行打印即可

<div class="modal-body">
    <div class="bootbox-body">
        <div class="row">
            <div class="col-md-12" style="display: flex;justify-content: center;">
                <!--startprint-->   //开始打印标记
                 <img src="" alt="">
                <!--endprint-->  //打印结束标记
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button data-bb-handler="success" type="button" class="btn" id="scan_print">
        <font>
            <font>打印</font>
        </font>
    </button>
</div>

//相当于将截取的内容渲染到页面中,进行整个页面的打印,打印之后在将原页面内容重新渲染
function print_qr(){
   var startStr = "<!--startprint-->";
   var endStr = "<!--endprint-->";

   var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));

   //将截取的字符串进行打印
   window.document.body.innerHTML = printHtml;
   window.print();

   //打印结束后重新加载页面,否则打印页面点击取消时原页面被修改
   window.document.body.innerHTML = bdhtml;
   location.reload();
}

$('#scan_print').on('click',function(){
  print_qr();
})

如果去掉打印时的页眉和页脚

@page{margin:0;}

设置js浏览器中分页打印

1. 在css中加入此段代码

@media print {
   .page{
        page-break-before: auto;
        page-break-after: always; //始终在.page之后进行分页的分页行为
    }
}

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。

page-break-after属性会将分页符号加在指定组件后
page-break-after属性会将分页符号加在指定组件前

每个打印属性都可以设定5种设定值：auto、always、left、right和avoid。
auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。
always，在遇到特定的组件时，重新开始一个新的打印页。
left，插入分页符号，直到指定的组件出现在一个左边的空白页上。
right，插入分页符号，直到指定的组件出现在一个右边的空白页上。
avoid，禁止插入分页符号

2.html文件(将想要在一页显示的放在一个.page容器中,但最好一个.page容器中不要放太多内容避免显示不下继续分页)

<div class="page">  
    <div>
        <img src="img/modify.png" alt="">
        <p>图片1</p>
    </div>
    <div>
        <img src="img/modify.png" alt="">
        <p>图片2</p>
    </div>
</div>
<div class="page">
    <div>
        <img src="img/modify.png" alt="">
        <p>图片1</p>
    </div>
    <div>
        <img src="img/modify.png" alt="">
        <p>图片2</p>
    </div>
</div>

效果如下图:

js实现页面所有图片完成加载之后的批量打印

(结合上述的css和html即可看到打印的效果)

$(function() {
   var num = $('img').length;
   $('img').each(function() {
       $(this).load(function() {
           num--;
           if (num <= 0) {
               window.print()
           }
       });
   });
})