登录  |  注册
当前位置：网站首页 > 更多 > 涨姿势 > 正文

[每日一学] HTML打印准考证用JS在html页面实现打印功能

作者：CC下载站 日期：2020-08-16 00:00:00 浏览：62 分类：涨姿势

用JS在html页面实现打印功能

做项目时，有在网页实现全局和局部打印的需求，百度许久，现总结如下：

打印方式一：

1.首先在head里面加入下面一段js代码：

<scriptlanguage="javascript">
functionpreview(fang)
{
if(fang<10){
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+fang+"-->";//设置打印开始区域
eprnstr="<!--endprint"+fang+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18);//从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}else{
window.print();
}
}
</script>

2.然后在所需要打印的代码，用和包围着，如下：

<!--startprint1-->

<!--打印内容开始-->
<divid=wdf>
...
</div>
<!--打印内容结束-->

<!--endprint1-->

3.最后加上一个打印的按钮

<inputtype='button'name='button_export'title='打印1'onclick=preview(1)value='打印1'>

打印方式二：

1.javascript中方法为：

<javascript>
functiondayin(){
	varuserAgent=navigator.userAgent.toLowerCase();//取得浏览器的userAgent字符串
	if(userAgent.indexOf("trident")>-1){
		alert("请使用google或者360浏览器打印");
		returnfalse;
	}elseif(userAgent.indexOf('msie')>-1){
		varonlyChoseAlert=simpleAlert({
"content":"请使用Google或者360浏览器打印",
"buttons":{
"确定":function(){
onlyChoseAlert.close();
}
}
})
		alert("请使用google或者360浏览器打印");
		returnfalse;
	}else{//其它浏览器使用lodop
		varoldstr=document.body.innerHTML;
		varheadstr="<html><head><title></title></head><body>";
		varfootstr="</body>";
		//执行隐藏打印区域不需要打印的内容
		document.getElementById("otherpho").style.display="none";
		//此处id换为你自己的id
		varprintData=document.getElementById("printdivaa").innerHTML;//获得div里的所有html数据
		document.body.innerHTML=headstr+printData+footstr;
		window.print();
		//打印结束后，放开隐藏内容
		document.getElementById("otherpho").style.display="block";
		document.body.innerHTML=oldstr;
	}
}
</javascript>

2.页面内容如下：

	...
<!--打印内容开始-->
<divid='printdivaa'>
...
</div>
<!--打印内容结束-->
	...

3.页面中放置一个打印按钮：

<buttontype="button"class="btn_search"onclick="dayin()">打印</button>


打印方式三（此方式会重新打开一个浏览器窗口）：

1.javascript中方法为：

	//打印操作
	functionprint(){
		varuserAgent=navigator.userAgent.toLowerCase();//取得浏览器的userAgent字符串
		if(userAgent.indexOf("trident")>-1){
			alert("请使用google或者360浏览器打印");
			returnfalse;
		}elseif(userAgent.indexOf('msie')>-1){
			varonlyChoseAlert=simpleAlert({
				"content":"请使用Google或者360浏览器打印",
				"buttons":{
					"确定":function(){
						onlyChoseAlert.close();
					}
				}
			})
			alert("请使用google或者360浏览器打印");
			returnfalse;
		}else{//其它浏览器使用lodop
			varoldstr=document.body.innerHTML;
			varheadstr="<html><head><title></title></head><body>";
			varfootstr="</body></html>";
			//执行隐藏打印区域不需要打印的内容
			document.getElementById("otherpho").style.display="none";
			varprintData=document.getElementById("studentPhoTable").innerHTML;//获得div里的所有html数据
			varwind=window.open("","newwin",
					"toolbar=no,scrollbars=yes,menubar=no");
			wind.document.body.innerHTML=headstr+printData+footstr;
			wind.print();
			//打印结束后，放开隐藏内容
			document.getElementById("otherpho").style.display="block";
			wind.close();
			window.document.body.innerHTML=oldstr;
		}
	}
</script>

2.页面内容如下：

	...
<!--打印内容开始-->
<divid='studentPhoTable'>
...
</div>
<!--打印内容结束-->
	...

3.页面中放置一个打印按钮：

<inputtype="button"onclick="print()"value="确定打印"/>


猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯