您的位置：首页 > Web前端 > JavaScript

打印Web所需区域的实现

2013-04-11 07:51 405 查看

解决打印预览不显示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]" onclick="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;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript printer

相关文章推荐

新的分享

章节导航