在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印。网上看了一下,大体上有2中实现方法,一种是用css @media控制,另一种是直接用js控制。下面分别来对其进行说明一下!
一、css控制网页局部打印
关于css控制打印,我之前的一篇文章写过css @media,不知道大家有没有印象了~~主要是介绍Media Query方法,地址:http://www.haorooms.com/post/css3media
也引进了css2的media
media可以是all,也可以是print ,加入是print,那么这个css只有在打印的时候才加载。那么这样就好办了,我们可以写针对css打印的样式,有些地方在打印的时候不显示,那么直接用display:none来设置不就可以了嘛!
除了上面的这种写法之外,还可以这么写
@media print {
.noprint { display: none; }
}
当你打印的时候noprint 类下面的所有内容不显示,不打印的时候显示。
举例:
这些内容在打印之前是显示的,当你点击打印的时候,会用上面的样式,不显示。达到了局部打印的效果!
二、js局部打印
直接上案例
haorooms js局部打印案例function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="";
eprnstr="";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
1不需要打印的地方
2这里不要打印啊
打印标题
打印内容~~
打印
1haorooms博客不打印的地方啊哈哈哈哈
2
可以把上面的代码黏贴到网页中,试一试,只有做了标记的地方打印了,代码很简单,相信你也看得懂。
延伸
通过上面的案例,我们可以看到,只要我们把要打印的东西放到document.body.innerHTML中就可以了
无论是一行内容,还是图片,还是文字,只要我们把拿到的html代码,赋值给document.body.innerHTML,然后在运用window.print(); 就可以对赋值的代码进行打印了!
问题
上面的方法打印完毕之后,body的内容变掉了,不是我们想要的结果,我们可以使用一个jquery插件来实现:这个插件名字是jquery.printarea.js
使用方法:
function doPrint() {
$("#dayin").printArea();
}
haorooms打印标题
haorooms打印的文字
关于网页打印,今天就说这么些,希望大家留言相互交流啊!