1. 程式人生 > >web 打印功能

web 打印功能

name display ive 網頁 日期 原因 居中 javascrip 時間格式

在項目開發中有時候會碰到要求打印頁面中的數據的功能需求。需求原因主要有兩點吧,一是需要打印的數據只是頁面的一部分即頁面的區域打印,比如只需要打印頁面中表格裏面選中的數據等,二是需要打印出來的樣式和頁面展示的樣式有差別,比如需要將表格中的列豎著打印出來。

我在開發中主要用到的就是window.print()這個js函數,這個函數相當於在頁面中右鍵打印那個功能,但如果直接使用這個函數會將整個頁面打印出來。所以我們對頁面數據的隱藏或者重寫一個頁面,得到我們想要打印的數據和樣式。

1、隱藏不需要打印的數據

這種方式只能針對打印出來的樣式和頁面樣式沒什麽差別的

貼代碼

<style type="text/css" media="print"
> /* 不需要打印的區域*/ .notPreview{ display: none; } </style>

  

然後調用window.print()即可

2、得到需要打印的數據,按照打印的樣式,重寫一個頁面進行打印

先貼代碼

bdhtml = window.document.body.innerHTML;
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
window.document.location.reload
();

  

在這個裏面,bdhtml為原始的頁面。prnhtml為真正調用右鍵打印的頁面,需要根據實際情況進行拼接。在頁面調用打印之後將頁面恢復為原始頁面,並reload,防止js函數不能正常使用。

在這之後還會遇到的問題 就是頁眉、頁腳、邊距等這些了,這些實際上都是寫在註冊表裏面的,所以需要修改註冊表。

function PageSetup(name,value) {
	try{
		var HKEY_Path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
		var Wsh = new ActiveXObject("WScript.Shell");
		Wsh.RegWrite(HKEY_Path+name,value);
	}catch(e){
		alert("需要運行ActiveX才能進行打印");
	}
}
PageSetup("header","");	// 頁眉為空
PageSetup("footer","");//頁腳為空
PageSetup("margin_left","0mm");//左邊距為0
PageSetup("margin_top","0mm");//上邊距為0

  


name 大致有這些:header(頁眉),footer(頁腳),margin_bottom(下邊距),margin_left(左邊距),margin_right(右邊距),margin_top(上邊距)

value的一些常用的大致有這些: &w 窗口標題 、&u 網頁地址 (URL) 、&d 短日期格式(由“控制面板”中的“區域設置”指定)、&D 長日期格式(由“控制面板”中的“區域設置”指定) 、&t 由“控制面板”中的“區域設置”指定的時間格式 、&T 24 小時時間格式 、&p 當前頁號 、&P 網頁總數 、&& 單個 & 號 (&) 、&b 緊跟在這些字符之後的文本居中打印。 、 &b&b 緊跟在第一個 "&b" 之後的文本居中打印,跟在第二個 "&b" 之後的文本按右對齊方式打印。

大概能滿足大部分的基本要求吧,我也是個了解的很淺,還請大家多多指教!

web 打印功能