js調用打印機 打印整體或部分

有時前端的項目中需要添加打印的功能，首先要知道打印分為整體打印和局部打印兩種，而局部打印又可細分為局部打印指定的部分，和局部打印指定部分之外的部分。實例比文字看起來更清晰，下面我將用代碼來描述

1、整體打印

這是最簡單的部分

<button id="print1">打印全部</button>

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

簡單的一行js代碼即可搞定

 

2、局部打印指定部分

下面的代碼中我們主要用第二個button

html代碼

	<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代碼：

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代碼：

	$('#print3').click(function(){
		$('p').hide();
		window.print();
		$('p').show();
	});

　這段代碼就是打印除p之外的部分了