js print打印网页指定区域内容
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] print打印网页是一种很简单的事情，但是有时我们希望打印一个指定区域的内容，下面我来给大家介绍怎么使用print打印指定区域网页代码。...
|
比较简单的办法
使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。
细如下：
| 代码如下 |
复制代码 |
|
<style media=print type="text/css">
.noprint{visibility:hidden}
</style>
|
要打印的内容。哈哈！
| 代码如下 |
复制代码 |
|
<p class="noprint">将不打印的代码放在这里。</p>
<a href="javascrīpt:window.print()" target="_self">打印</a>
|
方法二利用js来操作
| 代码如下 |
复制代码 |
|
<script language="javascript">
function preview()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
<div>文件头部,不打印出来的内容。。。</div>
<div>文件头部,不打印出来的内容。。。</div>
<div>文件头部,不打印出来的内容。。。</div>
<!--startprint-->
<div>这是被打印出来的内容</div>
<div>这是被打印出来的内容</div>
<div>这是被打印出来的内容</div>
<div>这是被打印出来的内容</div>
<!--endprint-->
<div>文件尾部，不打印出来的内容。。。</div>
<div>文件尾部，不打印出来的内容。。。</div>
<div>文件尾部，不打印出来的内容。。。</div>
<input type="button" name="print" value="预览并打印" onclick="preview()">
|
或者这样也可以
| 代码如下 |
复制代码 |
<script language="javascript" type="text/javascript">
function printpage(myDiv){
//var newstr = document.all.item(myDiv).innerHTML;
var newstr = document.getElementById(myDiv).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<div id="myDiv">Content</div>
<input type="button" id="bt" onclick="javascript:printpage('myDiv')" value="打印" /> |
上面js没测试过兼容性我们可使用jquery来设置
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>jquery 打印指定区域内容</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function printHtml(html) {
var bodyHtml = document.body.innerHTML;
document.body.innerHTML = html;
window.print();
document.body.innerHTML = bodyHtml;
}
function onprint() {
var html = $("#printArea").html();
printHtml(html);
}
</script>
</head>
<body>
<div>
<div id="printArea" style="width: 500px; text-align: left;">
打印区域~~~~
</div>
<br />
<div>
<input type="button" id="btnPrint" onclick="onprint()" value="print" />
</div>
</div>
</body>
</html>
|
下面看看我自己实例的一种办法，原理是这样
JavaScript打印页面指定div区域原理：使用window.open()在浏览器打开一个新的页面（window）, 使用 window.document.write()将指定div区域的内容写入新窗口文档，document.close()关闭文档，使用window.print()调用打印机打印当前文档
JavaScript打印函数myPrint(obj)：
| 代码如下 |
复制代码 |
|
function myPrint(obj){
//打开一个新窗口newWindow
var newWindow=window.open("打印窗口","_blank");
//要打印的div的内容
var docStr = obj.innerHTML;
//打印内容写入newWindow文档
newWindow.document.write(docStr);
//关闭文档
newWindow.document.close();
//调用打印机
newWindow.print();
//关闭newWindow页面
newWindow.close();
}
myprint()调用方法：
myPrint(document.getElementById('printDivID'));
|
例
| 代码如下 |
复制代码 |
|
<script>
function myPrint(obj){
var newWindow=window.open("打印窗口","_blank");
var docStr = obj.innerHTML;
newWindow.document.write(docStr);
newWindow.document.close();
newWindow.print();
newWindow.close();
}
</script>
<div id="print">
<hr />
打印演示区域,点击打印后会在新窗口加载这里的内容！
<hr />
</div>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>
|
|
