js打印

什么都不說(shuō),先上個(gè)圖。


dayin.png

一. window.print()#

window.print();會(huì)彈出打印對(duì)話(huà)框,打印的是window.document.body.innerHTML中的內(nèi)容。主流瀏覽器都支持這個(gè)方法

//這個(gè)樣式是過(guò)濾不需要打印的內(nèi)容的

<style media="print"> .Noprint{ display:none; } </style>

<body>
<div class="noprint" style="width:640px;height:20px;margin:100px auto 0 auto; font-size:12px;text-align:right;"> <input value="打印" type="button" onclick="window.print()" /> </div>
<div style="width:640px;height:624px;margin:20px auto;"> 這個(gè)是打印的內(nèi)容,只要是body里面就行,不帶noprint樣式的。 </div>
</body>

二. document.execCommand(”print”)#

該方式跟window.print()差不多,但是不兼容火狐,其啟動(dòng)的是打印對(duì)話(huà)框,360極速模式,chrome的打印對(duì)話(huà)框自帶預(yù)覽功能,但是,360兼容模式,IE僅僅只彈出打印設(shè)置對(duì)話(huà)框,沒(méi)有預(yù)覽功能。

三. 調(diào)用windows底層打印#

yulan.png

shezhi.png

具體實(shí)現(xiàn)

<script type="text/javascript">
    function printsetup(){ 
        wb.ExecWB(8,1);// 打印頁(yè)面設(shè)置
    }
    function printpreview(){ 
           wb.ExecWB(7,1);// 打印頁(yè)面預(yù)覽    
    }
    function printit() {
        wb.ExecWB(6,1);//打印
    }
</script>

<body>
<object id="wb" height=0 width=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" name="wb"> </object>
<div id="printButton" align=center style="margin-bottom: 10px" class="Noprint" > <input type="button" value="打印" name="button_print" style="cursor:pointer;" class="Btn uncheckBtn cornerRadius" onclick="printit()"/> <input onclick="printsetup();" type="button" style="cursor:pointer;" value="打印頁(yè)面設(shè)置" name="button_setup" class="Btn uncheckBtn cornerRadius" /> <input type="button" value="打印預(yù)覽" name="button_show" style="cursor:pointer;" class="Btn uncheckBtn cornerRadius" onclick="printpreview()"/> </div>
<div style="width:640px;height:624px;margin:20px auto;"> <strong>這個(gè)是打印的內(nèi)容,只要是body里面就行,不帶noprint樣式的。</strong> </div>
</body>

四. jquery.PrintArea.js#

jquery.PrintArea.js下載地址:http://pan.baidu.com/s/1nu6eGzv
這個(gè)是一款jquery的插件,簡(jiǎn)單實(shí)用,支持局部打印功能。360極速模式,chrome的打印對(duì)話(huà)框自帶預(yù)覽功能,其他都是彈出打印對(duì)話(huà)框。效果跟以上類(lèi)似

<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script>

function print(){ $("#print").printArea(); }
<div class="noprint" style="width:640px;height:20px;margin:100px auto 0 auto;font-size:12px;text-align:right;"> <input value="打印" type="button" onclick="print()" /> </div>
<div id="print" style="width:640px;height:624px;margin:20px auto;"> <strong>這個(gè)是打印的內(nèi)容,只要是body里面就行,不帶noprint樣式的。</strong> </div>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程,因...
    小菜c閱讀 6,554評(píng)論 0 17
  • 事件源對(duì)象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 910評(píng)論 0 0
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,255評(píng)論 4 61
  • 城墻下是一棵棵枯光禿禿的樹(shù),葉子都被凍掉了。不知是什么緣故,一大早蜿蜒盤(pán)踞在群山上的城墻被大霧籠罩,眼前仿佛隔著一...
    橙蜂破浪閱讀 319評(píng)論 0 0
  • 不知不覺(jué)中,《歡樂(lè)頌》已經(jīng)迎來(lái)了大結(jié)局,在它播放到十幾集的時(shí)候,網(wǎng)絡(luò)上開(kāi)始火了,各種點(diǎn)評(píng)它的帖子鋪天蓋地,我也看了...
    小勺一漪閱讀 517評(píng)論 0 0