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