打印Web所需区域的实现

最新推荐文章于 2024-11-03 20:03:09 发布

sonikk

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/sonikk/article/details/8785952

版权

javascript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

printer

1 篇文章 0 订阅

订阅专栏

解决打印预览不显示css的问题

图1:网页当中显示的内容

图2:在Chrome浏览器内点击[打印B]按钮后的打印预览，注意左下方的红色横线部分需要打上勾，才能支持print类型的css

printer.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>打印测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="screen" href="mysite-print.css" />
	<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />
	
	<style type="text/css" media="screen">
		/*已被注释*/
		/*.cc{width:100px;height:100px;}*/
		/*#d1{background:#cc5555;}*/
		/*#d2{background:#55cc55;}*/
		/*#d3{background:#5555cc;}*/
	</style>
	
	<script type="text/javascript">
	function preview(oper)
	{
		if (oper < 10)
		{
			bdhtml=window.document.body.innerHTML;//获取当前页的html代码
			sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
			eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
			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>
	</head>

	<body>
		
		<input type="button" value="打印[B]" οnclick="preview(1)" />
		<div class="cc" id="d1">
		A
		</div>
		
		<!--startprint1-->
		<div class="cc" id="d2">
		B
		</div>
		<!--endprint1-->
		
		<div class="cc" id="d3">
		C
		</div>
	</body>
</html>

mysite-print.css：

.cc{width:100px;height:100px;}
#d1{background:#cc5555;}
#d2{background:#55cc55;}
#d3{background:#5555cc;}

sonikk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录