当前位置：首页 > 资讯 > 技术文档

window.print打印指定div指定网页指定区域的方法

时间：2020-02-24 12:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：window.print打印指定div指定网页指定区域的方法

[b]第一种方法：指定不打印区域 [/b]使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。细如下：

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

要打印的内容。哈哈！

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>

[b]第二种方法：指定打印区域 [/b]把要打印的内容放入一个 span或div，然后通过一个函数打印。

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>

如果要打印的只是整个页面中的一小部分，就最好采用第二种方法。 [b]第三种方法[/b]：如果要打印的页面排版和原web页面相差很大，采用此种方法。点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。 window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。

<html> 
<head> 
<script language="javascript"> 
function printdiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var footstr = "</body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr+footstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 
<title>div print</title> 
</head> 

<body> 
//HTML Page 
//Other content you wouldn't like to print 
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print "> 

<div id="div_print"> 

<h1 style="Color:Red">The Div content which you want to print</h1> 

</div> 
//Other content you wouldn't like to print 
//Other content you wouldn't like to print 
</body>
</html>

全部评论(0)

上一篇：Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（二）
下一篇：JS及JQuery对Html内容编码,Html转义

资讯排行榜
更多>>