JavaScript+CSS控制打印格式示例介紹
更新時(shí)間：2014年01月07日 17:42:22 作者：
用media="print"的css來控制要打印的文件，media為print的樣式，表示打印時(shí)該樣式才起作用，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過
1. 用media="print"的css來控制要打印的文件testPrint.html中引用media為print的樣式，表示打印時(shí)該樣式才起作用
<link href="/style/print.css" rel="stylesheet" type="text/css" media="print">
/style/print.css文件
.noprint{display:none;}
在testPrint.html中使用print.css中的樣式，在網(wǎng)頁瀏覽的時(shí)候是看不出效果的，但是打印的時(shí)候會(huì)起作用，如下面這一段，加上noprint之后，在瀏覽器中仍然是現(xiàn)實(shí)的，但是打印的時(shí)候不顯示：
<div class="noprint">
<input type="button" onclick="window.print();" value="打印本頁" />
</div>
當(dāng)然print.css里面的樣式你可以隨便寫，改顏色?。ú噬膱D像在黑白打印機(jī)下效果不好，可以用另一種樣式打?。?，字體什么的都可以，隨便發(fā)揮-----------------------------------------------------------------
2. 用JavaScript來控制
因?yàn)檫@樣那樣的原因，可能有的人css不太熟練，有的人JavaScript比較牛x，有時(shí)候JavaScript也是不錯(cuò)的選擇
<script type="text/javascript">
<!--
//自動(dòng)在打印之前執(zhí)行
window.onbeforeprint = function(){
$("#test").hide();
}
//自動(dòng)在打印之后執(zhí)行
window.onafterprint = function(){
$("#test").show();
}
//-->
</script>
<div id="test">這段文字不會(huì)被打印出來</div>
打印之前，會(huì)調(diào)用window.onbeforeprint函數(shù)，這時(shí)你可以隨意發(fā)揮，用你的聰明才智給html重新構(gòu)造一邊，然后打印。當(dāng)然打印之后一般還要弄回來，就是window.onafterprint函數(shù)了
---------------------------------------------------------------
小技巧：注意一點(diǎn)，打印我們都知道是window.print()，其實(shí)也可以打印框架的，如window.top.centerFrame.MainFrame.print();
復(fù)制代碼 代碼如下:
<link href="/style/print.css" rel="stylesheet" type="text/css" media="print">
/style/print.css文件
復(fù)制代碼 代碼如下:
.noprint{display:none;}
在testPrint.html中使用print.css中的樣式，在網(wǎng)頁瀏覽的時(shí)候是看不出效果的，但是打印的時(shí)候會(huì)起作用，如下面這一段，加上noprint之后，在瀏覽器中仍然是現(xiàn)實(shí)的，但是打印的時(shí)候不顯示：
復(fù)制代碼 代碼如下:
<div class="noprint">
<input type="button" onclick="window.print();" value="打印本頁" />
</div>
當(dāng)然print.css里面的樣式你可以隨便寫，改顏色?。ú噬膱D像在黑白打印機(jī)下效果不好，可以用另一種樣式打?。?，字體什么的都可以，隨便發(fā)揮-----------------------------------------------------------------
2. 用JavaScript來控制
因?yàn)檫@樣那樣的原因，可能有的人css不太熟練，有的人JavaScript比較牛x，有時(shí)候JavaScript也是不錯(cuò)的選擇
復(fù)制代碼 代碼如下:
<script type="text/javascript">
<!--
//自動(dòng)在打印之前執(zhí)行
window.onbeforeprint = function(){
$("#test").hide();
}
//自動(dòng)在打印之后執(zhí)行
window.onafterprint = function(){
$("#test").show();
}
//-->
</script>
<div id="test">這段文字不會(huì)被打印出來</div>
打印之前，會(huì)調(diào)用window.onbeforeprint函數(shù)，這時(shí)你可以隨意發(fā)揮，用你的聰明才智給html重新構(gòu)造一邊，然后打印。當(dāng)然打印之后一般還要弄回來，就是window.onafterprint函數(shù)了
---------------------------------------------------------------
小技巧：注意一點(diǎn)，打印我們都知道是window.print()，其實(shí)也可以打印框架的，如window.top.centerFrame.MainFrame.print();
您可能感興趣的文章:
- JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置
- javascript 打印內(nèi)容方法小結(jié)
- javascript 局部頁面打印實(shí)現(xiàn)代碼
- javascript 打印頁面代碼
- Javascript打印網(wǎng)頁部分內(nèi)容的腳本
- javascript下用ActiveXObject控件替換word書簽，將內(nèi)容導(dǎo)出到word后打印
- JavaScript 實(shí)現(xiàn)網(wǎng)頁打印處理
- 用javascript實(shí)現(xiàn)頁面打印的三種方法
- javascript檢查瀏覽器是否已經(jīng)啟用XX功能
- JavaScript調(diào)用瀏覽器打印功能實(shí)例分析
相關(guān)文章
JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能
這篇文章主要介紹了JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
基于JavaScript實(shí)現(xiàn)回到頁面頂部動(dòng)畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁面頂部動(dòng)畫代碼的相關(guān)資料,代碼簡(jiǎn)單易用，非常實(shí)用，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了TypeScript常見類型及應(yīng)用示例講解，本章我們會(huì)講解?JavaScript?中最常見的一些類型，以及對(duì)應(yīng)的描述方式，有需要的朋友可以借鑒參考下2022-02-02
有人用JS做網(wǎng)站跳轉(zhuǎn),也有人用很多其他作弊的方法,今天又發(fā)現(xiàn)有太多的人用這樣的方法實(shí)現(xiàn)兩個(gè)站的IP共享,把http://m.fzitv.net替換成自己的站2008-09-09
不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼
本篇文章主要是對(duì)不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
比較簡(jiǎn)單實(shí)用的使用正則三種版本的js去空格處理方法
比較簡(jiǎn)單實(shí)用的使用正則三種版本的js去空格處理方法...2007-11-11
IE和firefox的event事件兼容分析。2009-12-12
這篇文章主要給大家介紹了關(guān)于如何用js獲得當(dāng)前視頻播放狀態(tài)的相關(guān)資料,大家在日常應(yīng)用場(chǎng)景中可能會(huì)遇到這么一個(gè)情況,需要判斷用戶是否完整的觀看完了一部視頻,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細(xì)的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)輪播圖效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03