JS/Jquery_实现打印页面指定div的方法_个人总结

来源：互联网发布：ubuntu怎么进入grub 编辑：程序博客网时间：2024/06/05 08:02

最近正在开发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 = "";
end_str = "";
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中常用的解决方法，大家可以尝试。
以上所述可能会存在纰漏，如有对大家造成困扰，望见谅

0 0