再记js前端打印指定内容

一、需求变动，需要使用JS前端进行打印

于是乎网上找了一个JS打印指定内容的资料，这里记录下。

二、处理方案说明

①使用startprint和endprint来标注打印区域

②js获取dom信息

③把需打印dom信息重新写入到页面

④切记，写完之后需要浏览器渲染，这里可以加一个延时

⑤针对不同浏览器进行处理

⑥打印

三、没什么东西，直接上代码吧

<html>
<head>
    <meta charset="UTF-8">
    <title>js打印</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
	<button onclick="doPrint()" >使用JS打印网页内容及图片</button></br>
	<!--startprint-->  	
		<img height="180px" width="390px" src="label.png">
	<!--endprint-->  
</body>
<script>
	function doPrint() {  
	  var  bdhtml = window.document.body.innerHTML;  
	  var  sprnstr = "<!--startprint-->";    //用于截断字符串的内容，截取到指定的图片内容了
	  var  eprnstr = "<!--endprint-->";  
	  var  prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);  
		   prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));  
	   window.document.body.innerHTML = prnhtml;
		setTimeout(function(){
			if (getExplorer() == "IE") {  
				pagesetup_null();  
			}  
			window.print();  
			window.document.body.innerHTML=bdhtml; //还原 原有页面内容;
		},1000);		
	}

	//获取浏览器类型
	function getExplorer() {  
		var explorer = window.navigator.userAgent;  
		//ie   
		if (explorer.indexOf("MSIE") >= 0) {  
			return "IE";  
		}  
			//firefox   
		else if (explorer.indexOf("Firefox") >= 0) {  
			return "Firefox";  
		}  
			//Chrome  
		else if (explorer.indexOf("Chrome") >= 0) {  
			return "Chrome";  
		}  
			//Opera  
		else if (explorer.indexOf("Opera") >= 0) {  
			return "Opera";  
		}  
			//Safari  
		else if (explorer.indexOf("Safari") >= 0) {  
			return "Safari";  
		}  
	}  
	 
	//IE设置去除页眉页脚  
	function pagesetup_null() {  
		var hkey_root, hkey_path, hkey_key;  
		hkey_root = "HKEY_CURRENT_USER";  
		hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";  
		try {  
			var RegWsh = new ActiveXObject("WScript.Shell");  
			hkey_key = "header";  
			RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");  
			hkey_key = "footer";  
			RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");  
		} catch (e) { }  
	} 
</script>
</html>

更多精彩请关注guangmuhua.com