快捷導(dǎo)航

實(shí)現(xiàn)web打印的各種方法介紹及實(shí)現(xiàn)代碼

更新時(shí)間：2013年01月09日 16:10:29 作者：

web的打印方法具我自己懂得知道的有：JQuery插件Jqprint實(shí)現(xiàn);JQery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印;CSS控制網(wǎng)頁(yè)打印樣式,本文詳細(xì)介紹實(shí)現(xiàn)步驟，感興趣的朋友可以了解下

wed的打印方法具我自己懂得知道的有：
1、JQuery插件Jqprint實(shí)現(xiàn)
2、JQery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
3、CSS控制網(wǎng)頁(yè)打印樣式

JQuery插件Jqprint實(shí)現(xiàn)：
首先要導(dǎo)入js文件：
jquery.jqprint.js下載

復(fù)制代碼代碼如下:

 
<scriptlanguage="javascript"src="jquery-1.7.1.min.js"></script> 
<scriptlanguage="javascript"src="jquery.jqprint.js"></script> 

html代碼：

復(fù)制代碼代碼如下:

 
<divclass="my_show"> 
這個(gè)打印時(shí)是顯示的 
</div> 
<divclass="my_hidden"> 
這個(gè)打印時(shí)是隱藏的。 
</div> 
<inputtype="button"id="print"/> 

javascript代碼：

復(fù)制代碼代碼如下:

 
<scripttype="text/javascript"> 
$(document).ready(function(){ 
$("#print").click(function(){ 
$(".my_show").jqprint(); 
}) 
}); 
</script> 

該插件還提供了一些參數(shù)可配置，

復(fù)制代碼代碼如下:

 
{ 
debug:false,//如果是true則可以顯示iframe查看效果（iframe默認(rèn)高和寬都很小，可以再源碼中調(diào)大），默認(rèn)是false 
importCSS:true,//true表示引進(jìn)原來(lái)的頁(yè)面的css，默認(rèn)是true。（如果是true，先會(huì)找$(“l(fā)ink[media=print]“)，若沒有會(huì)去找$(“l(fā)ink”)中的css文件） 
printContainer:true,//表示如果原來(lái)選擇的對(duì)象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會(huì)打破你的CSS規(guī)則）。 
operaSupport:true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true 
} 

而我自己使用到的只有importCSS：原始頁(yè)面中的鏈接將導(dǎo)入到iframe。第一次它媒體searchs=打印，如果沒有，將導(dǎo)入的正常的css文件。

importCSS示例：

復(fù)制代碼代碼如下:

 
$('.my_show').jqprint({ 
importCSS://CSS樣式文件 
}); 

您可能感興趣的文章:

相關(guān)文章

js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序詳解
在本篇文章里小編給大家整理是一篇關(guān)于javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-10-10
解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-09-09
js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法集錦
這篇文章主要介紹了js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法,實(shí)例匯總分析了時(shí)間顯示格式轉(zhuǎn)換的常用思路與技巧,需要的朋友可以參考下
2015-05-05
一文全面解析JS中的this綁定規(guī)則
寫過JavaScript的都知道,JS中的this相對(duì)來(lái)講是比較難以捉摸的,尤其在一些復(fù)雜的場(chǎng)景下的指向總是讓人摸不著頭腦,所以這篇文章我們就來(lái)系統(tǒng)的學(xué)習(xí)和研究一下this的綁定規(guī)則,需要的朋友可以參考下
2024-04-04
JS對(duì)img進(jìn)行操作(換圖片/切圖/輪換/停止)
JS對(duì)img進(jìn)行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js知識(shí)有所幫助
2013-04-04
使用JavaScript開發(fā)IE瀏覽器本地插件實(shí)例
這篇文章主要介紹了使用JavaScript開發(fā)IE瀏覽器本地插件實(shí)例,本文講解使用JS+注冊(cè)表的方式開發(fā)一個(gè)IE瀏覽器本地插件,需要的朋友可以參考下
2015-02-02
javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用案例分析
這篇文章主要介紹了javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用,結(jié)合具體實(shí)例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
這篇文章主要介紹了微信小程序 WXML節(jié)點(diǎn)信息查詢?cè)斀?文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07