使用js实现指定div内容打印功能

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

使用js实现指定div内容打印功能相关推荐

用JS在html页面实现打印功能
用JS在html页面实现打印功能打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先 ...
js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
js 监听div内容的变化
使用DOMNodeInserted可以监听div内容的变化 $("#change").bind("DOMNodeInserted",function(){ ...
JS复制指定DIV文本内容
应用场景:直接对系统剪切板赋值仅支持IE浏览器,如谷歌等其他浏览器无法使用. <script>function twqh() {let transfer = document.create ...
js innerHTML 改变div内容的方法
2019独角兽企业重金招聘Python工程师标准>>> 永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的i ...
JS - 在html页面实现打印功能
首先在head里面加入下面一段js代码: <script language="javascript"> function preview(oper){if (oper ...
js页面指定div刷新（局部刷新）
页面全部刷新和指定一个div刷新的方法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
浏览器打印功能print.js
插件文档:https://printjs.com/ npm文档: https://www.npmjs.com/package/print-js npm install print-js --save ...

使用js实现指定div内容打印功能

使用js实现指定div内容打印功能相关推荐

最新文章

热门文章