您的位置：首页 > 其它

window.print()打印页面部分内容

2011-11-04 09:54 302 查看
window.print() 实际上，是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但是这种方式最致命的缺点是不能设置打印参数，比如纸型，页边距，选择打印机等等。

需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送去打印，打印后又处理回来。

function window.onbeforeprint()

{

//将一些不需要打印的隐藏

}

function window.onafterprint()

{

//放开隐藏的元素

}

通过这两个方法，就可以实现页面的部分打印



调用window.print()时，可以利用css来控制页面中的东西是否显示

<style>
@media print{
　　.noprint{
　　display:none
　　}
}
</style>

HTML如下：

<table width="757" height="174" border="0" align="center"cellpadding="0"
cellspacing="0">
<tr class="noprint">
<td height="133" align="center" valign="top">
<img src="Images/top.jpg" width="757" height="133"></td>
</tr>

</table>

此时<tr class="noprint">是不打印的tr

下面是media的相关

media类型是CSS属性媒体类型，用于直接引入媒体的属性。其语法格式如下：
@media screen | print | projection | braille | aural | tv | handheld | all
参数说明
screen：指计算机屏幕。
print：指用于打印机的不透明介质。
projection：指用于显示的项目。
braille：盲文系统，指有触觉效果的印刷品。
aural：指语音电子合成器。
tv：电视类型的媒体。
handheld：指手持式显示设备。
all：用于所有媒体。



要打印页面指定内容可以通过使用样式表来实现，楼上的回答虽然也可以实现只打印部分内容，但前提是打印的内容都在你做的标记之间，在某些情况下也不尽如意，楼主不妨试试以下方法：

<style type='text/css'>

@media print {

input, textarea, select, a, .NoPrint { display: none; }

}

</style>

以上样式设置所有输入控件，选择控件，超链接和指定类型的元素在打印时不显示，即是不打印，要想不打印的元素都只加上样式类“NoPrint”即可，如：

<body>

<div>在这里放入任意需要打印的内容<span class='NoPrint'>此内容不打印！</span><span style='color:red; font-size:20px;'>这是大号字！</span></div>

<div class='NoPrint'>说明：此信息不会被打印。</div>

</body>



在打印时调用这个方法就可以了！~

//处理打印部分页面信息的方法

function doPrint() {

bdhtml=window.document.body.innerHTML; //获得body标签内的全部html代码

sprnstr="<!--startprint-->"; //声明一个字符串，用于表示打印的起始位置

eprnstr="<!--endprint-->"; //标示打印的结束位置

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //查找打印的起始字符串并加上17，因为<!--startprint-->的长度为17，所以要加17，这样打印时不会把标示打印出来

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //和上边的意思差不多

window.document.body.innerHTML=prnhtml; //通过window对象得到body对象并将当前窗体的内容设置为要打印起始标示符和结束标示符之间的内容，这样打印出来就只有需要的部分，而其他没用的信息都不会有的

window.print();

}

有两点需要说明一下：程序中声明了一个打印起始的字符串和一个结束的字符串，根据获取这两个字符串

来得到需要打印的内容，所以在你的html代码中应该有这两个字符串的出现，至于位置就像这样：比如我

要打印当前页面中一个<table></table>中所有的信息，那么你应该在这个<table>标签前加入起始字符串

在</table>结束标签后加入结束标示的字符串。就像这样<!--startprint--><table></table><!--endprint-->

此处需要注意一个地方：<!--startprint-->这个和<table>标签之间不要有空格回车这样的空字符

否则程序运行会有问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航