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()           }       });   });})