最近正在开发OA系统,涉及到了页面打印的相关操作。在实际的开发过程中,浏览器本身自带的打印操作默认打印整个可视界面,但是往往不能满足实际项目需要,打印页面指定内容的功能在OA系统中更加常见。网络上有很多的方法实现,本人结合自身实际体会,绝大多数的方法进行归纳。
本文使用的例子是3个4X3表格,分别写在,1号:<div>内,2号:由<div>载入页面内,3号:由iframe引入页面内,如图:
方法一:将table放入生成新页面中
function doPrint(){
var head_str = "<html><head><title></title></head><body>"; //先生成头部
var foot_str = "</body></html>"; //生成尾部
var older = document.body.innerHTML;
var new_str = document.getElementById('目标ID').innerHTML; //获取指定打印区域
var old_str = document.body.innerHTML; //获得原本页面的代码
document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
window.print(); //打印刚才新建的网页
document.body.innerHTML = older; //将网页还原
return false;
}
此方法思想是把目标放在一个新的页面中,这样进行打印的话,虽然打印的是整个页面,但是页面这只有目标元素,所以近似看做只打印了目标元素。结果1号和2号可正常打印(以打印预览为准),3号无效果(无论ID取iframe的id还是iframe所引入页面中的id),截图如下:
要注意的是,此方法相当于把页面替换再换回的过程,原页面发生过一次改变,当页面结构比较复杂,例如使用标签页或者存在动态数据显示等情况时,打印后的页面存在被破坏失去部分功能的可能性。
方法二:页面中创建标记打印
function doPrint() {
html_str = window.document.body.innerHTML;
start_str = "<!--startprint-->";
end_str = "<!--endprint-->";
new_html = html_str.substr(html_str.indexOf(start_str)+17);
new_html = html_str.substring(0,new_html.indexOf(end_str)); //截取标记之间的代码段
window.document.body.innerHTML = new_html;
window.print();
}
此方法的思想与方法一相同,差别仅在于选取目标元素的方式不同。但是结果是一样的(图见方法一,不再另附)。代码中并没有
使页面还原的函数,所以上述代码执行之后,页面会被破坏。
方法三:将无用代码隐藏后打印
function doPrint() {
$('目标ID').css('display','none');
window.print();
}
此方法针对div和iframe都可以实现,如果不还原页面,同样在打印后页面会发生变化。如果元素ID选取的是iframe所引用的页面内div,测试了一下,不可。
方法四:CSS控制是否打印
<style type="text/css" media=print>
.noprint{display : none }
</style>
对于不打印的元素,设置class为noinput,需要打印的可以忽略。此方法与上一方法类似,都是控制display的属性,但是优点在于此方法不会破坏页面,这是很多方法不具备的。和以上的其他方法一样,此方法打印的元素不会自适应“纸张大小”。同时,对于iframe引用的页面,在内部设置class存在失效的可能性。
方法五:页面创建新iframe存放后打印
function doPrint(){
var obj = document.getElementById('目标ID');
var new_iframe = document.createElement('IFRAME');
var doc = null;
new_iframe.setAttribute('style', 'width:0px;height:0px;position:absolute;left:-2000px;top:-2000px;');
new_iframe.setAttribute('align', 'center');
document.body.appendChild(new_iframe);
doc = new_iframe.contentWindow.document;
doc.write('<div style="width:100%;height:auto;min-width:1100px;margin:0px auto;"align="center">'+obj.innerHTML+'</div>');
doc.close();
new_iframe.contentWindow.focus();
new_iframe.contentWindow.print();
//document.body.removeChild(iframe);
}
此方法思想是将目标元素放置到一个新建的iframe中(通过设置iframe的css属性使其脱离页面可视范围之外),在调用iframe的打印方法(先聚焦focus()),打印其载入的页面(目标元素),近似实现打印指定页面的的效果。此方法针对div可行,但是对iframe引入的内容试了两次,未果(针对iframe载入页面的打印,完全可以根据这个方法的思想,将页面焦点定在iframe框架本身,在调用打印函数)。
方法六:针对iframe打开新页面打印
function doPrint(){
var new_html = document.getElementById("目标ID").src;
var new_page = window.open(new_html);
new_page.print();
}
此方法思想是把iframe所以用的页面已新网页形式打开,在调用页面打印。好处是不破坏原网页,但是个人感觉没有太大必要。
方法七:调用库文件实现封装好的方法打印
<script type="text/javascript" src="jquery.PrintArea.js"></script>
function doPrint(){
$('目标ID').printArea();
}
此方法原理与方法六类似,只不过源文件的实现比方法六更加完美,代码更加健壮。此处不再赘述。
总结:
实现打印页面指定div的方法并不只有以上几种,但以上几种比较常见,不保证能涵盖所有情况。以上的方法统一的弊端就是,目标元素打印之后的样式是默认布局,例如,如果想要将当前页面65%宽的table以100%形式打印,需要在打印之前,对目标元素的样式表进行处理。此外,以上代码目前只在Chrome浏览器中测试通过,时间原因,firefox和IE并未来得及测试。还有,IE打印插件WebBrowser,也是在IE中常用的解决方法,大家可以尝试。
以上所述可能会存在纰漏,如有对大家造成困扰,望见谅