JavaWeb开发 JS调用打印机打印全部或局部页面

JavaScript 专栏收录该内容
1 篇文章 0 订阅

1、整体打印

<button id="print1">打印整体</button>

   $('#print1').click(function(){
     window.print();
   });


2、局部打印指定部分

下面的代码中我们主要用第二个button

html代码

1
2
3
4
5
6
7
8
9
< p >下面是百度的图片</ p >
< div >
     
     < img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
     
</ div >
< button id="print1">打印全部</ button >
< button id="print2" onclick="doPrint()">打印指定部分(以打印图片为例)</ button >
< button id="print3">打印除某部分之外的的部分</ button >

js代码:

1
2
3
4
5
6
7
8
9
10
function doPrint() {
         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(); //调用浏览器的打印功能打印指定区域
         window.document.body.innerHTML=bdhtml; // 最后还原页面
     }

用法:

比如我想打印html页面中的图片,将上述js代码复制,在html文档中img标签前加上‘<!--startprint-->’,标签后加上‘’<!--endprint-->即可

图例:

js代码中的17指的就是‘<!--startprint-->’的长度。

 

3.局部打印指定部分之外的内容

其实原理也很简单,就是在打印前将指定部分隐藏,打印后再将指定的部分显示出来

js代码:

1
2
3
4
5
$( '#print3' ).click( function (){
     $( 'p' ).hide();
     window.print();
     $( 'p' ).show();
});

 这段代码就是打印除p之外的部分了

  • 0
    点赞
  • 3
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值