JS 呼叫印表機列印網頁文件
阿新 • • 發佈：2019-01-30
有時前端的專案中需要新增列印的功能，首先要知道列印分為整體列印和區域性列印兩種，而區域性列印又可細分為區域性列印指定的部分，和區域性列印指定部分之外的部分。例項比文字看起來更清晰，下面我將用程式碼來描述
1、整體列印
這是最簡單的部分
<button id="print1">列印全部</button>
$('#print1').click(function(){
window.print();
});
簡單的一行js程式碼即可搞定
2、區域性列印指定部分
下面的程式碼中我們主要用第二個button
html程式碼
| 123456789 | <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程式碼：
| 12345678910 | 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.innerHTMLwindow.print(); //呼叫瀏覽器的列印功能列印指定區域window.document.body.innerHTML=bdhtml; // 最後還原頁面} |
用法：
比如我想列印html頁面中的圖片，將上述js程式碼複製，在html文件中img標籤前加上‘<!--startprint-->’，標籤後加上‘’<!--endprint-->即可
圖例：
js程式碼中的17指的就是‘<!--startprint-->’的長度。
3.區域性列印指定部分之外的內容
其實原理也很簡單，就是在列印前將指定部分隱藏，列印後再將指定的部分顯示出來
js程式碼：
| 12345 | $('#print3').click(function(){$('p').hide();window.print();$('p').show();}); |
這段程式碼就是列印除p之外的部分了