JS打印指定页面且去样式后的内容，window.print-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20323/article/details/82443688

[img]http://dl.iteye.com/upload/attachment/0076/8459/f34ed36b-2d2f-3468-ba84-4b4ed9bff409.jpg[/img]
如图，我们要打印主页面中工单详情部分。
但是由于要打印的部分有样式，并且表格太宽，如果要直接打印的话，打出来的纸张上字太小且颜色模糊，不易查看。

只要去掉样式，字体会变大，打印出来的效果要好的多。
方案一：我们可以取出要打印的部分，将打印部分填充到弹出的新页面中，然后我就再打印弹出页面即可。

这样做的话，有个缺陷，就是会先把要打印的页面显示出来，然后要用户再次点击打印按键，显示比较啰嗦蛮烦。

方案二：可以在要打印的页面中，嵌入一隐藏的iframe，用于存放要打印的部分代码。
我们点击打印按钮时，实际上是打印这个隐藏iframe的内容。

打印页面代码


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>工单详细信息</title>
	<script type="text/javascript">
		function printPage() {
			//获取当前页的html代码
			var bodyhtml = window.document.body.innerHTML;
			//设置打印开始区域、结束区域
			var startFlag = "<!--startprint-->";
			var endFlag = "<!--endprint-->";
			// 要打印的部分
			var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag), 
					bodyhtml.indexOf(endFlag));
			// 生成并打印ifrme
			var syfPrint = document.frames[0];
			syfPrint.document.body.innerHTML = printhtml;
			syfPrint.document.execCommand("Print");
		}
	</script>
</head>
<body>
	<div id="bd">
		<div id="right_box">
			<a href="#" onclick="javascript:history.back(1); event.returnValue=false">
					<< 返回</a><br />
			<!--startprint-->
				//要打印的内容部分//<br />
			<!--endprint-->
			<input type="button" value="打印" onClick="printPage()" />

	</div>
	<iframe src="" width="0" height="0" frameborder="0"></iframe>
</body>
</html>