最近在做一个招聘网站,要求有页面的打印。以前用ie自带的插件,不过客户要求做到,各个浏览器的兼容性,现在很多用户都用什么360,猎豹,遨游。蛋疼。。。
考虑到各个浏览器的兼容性,尤其是现在越来越多的浏览器开始有了极速模式,使用chrome的内核。所以最后选用了window.print()方法。
window.print()打印的是body中的内容,在显示与打印中遇到了几个问题。有的已经解决,有的没有很好的解决,欢迎来多多交流。
1、打印时需要有不显示的内容
现在主要有两种方法:
①用css自带的media="print"。
<style media="print">
.noprint {display : none;}
</style>
对打印中不显示的内容应用class="noprint"即可。
②提起需要打印的内容赋值给body
我是通过打印内容外层加一个div,通过jquery获取里面的内容赋值的。如果没有引用jquery可使用一下方法:
引用:
//处理打印部分页面信息的方法
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>标签之间不要有空格回车这样的空字符
否则程序运行会有问题。
2、打印时遇到纯文字的时候,不能正确的排版
可使用text-justify具体可参考(引用别人文章)http://blog.youkuaiyun.com/guo_net/article/details/10903731