今天在做一个公司的合同的会签表，他们的需求需要打印，于是本人在网上一顿狂搜 搜到了一个页面局部打印的代码，开始的时候没有细看，直接上手。
代码：
<script type="text/javascript">
function preview(oper)
{
if (oper < 10)
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}
else
{
window.print();
}
}
可是用过之后才发现里面的表格的边框打印的时候全部都打印不出来，向群的高手请教了一下，原来所有的背景色和背景图片在打印的时候都不会被打印。
经过修改，用css写了3个class才解决，测试，又出现问题，在IE浏览器下的打印是没有问题的，但是使用局部打印的时候却没有了表格，一阵郁闷之后寻找bug
通过查看页面代码才发现局部打印和整页打印的区别：
观察一下JS代码window.document.body.innerHTML=prnhtml; 这个代码的意思是取到待打印代码部分，然后赋值给整个页面代码，但是局部打印的代码中并没有body这个标签，所以才会有在局部打印的时候整个页面都是空的情况。
修改如下：
function preview(oper)
{
if (oper < 10)
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML="<body>"+prnhtml+"</body>";
window.print();
window.document.body.innerHTML=bdhtml;
}
else
{
window.print();
}
}
加上body之后的局部打印就正常了！
评论回复