要实现网页打印其实很简单,一个window.print(); 就可以了。 但是往往需求中要求我们打印的不是整个页面,而是部分有用的东西。而window.print();只能打印整个页面。这时就需要分区域的打印。目前发现有以下几种方法。先记成笔记,万一以后忘记了可以再来查阅。
1、CSS控制在打印时不需要打印的部分隐藏起来
(1) bootstrap中的hidden-print可以在打印时将不需要显示的部分隐藏起来。在那一部分的最外层dom元素中加上 class="hidden-print" 即可。
(2)
@media print { .notPrint{ display: none; } }
用@media print将需要隐藏部分display: none; 也可以。此方法还可以修改打印时的样式。
2、JS拼接字符串的方法将需要打印的地方拼接起来。以下是前段时间项目中打印的代码:
var wHtml=document.body.innerHTML; //先将页面dom保存起来 var printData=$('#CC-orderDetial').html(); //构造需要打印部分 document.body.innerHTML = printData; /将需要打印部分赋值给当前页面 window.print(); //打印 document.body.innerHTML=wHtml; //还原原来的页面 document.location.reload(); return false;
以上几种方法虽然可以实现部分打印,但还隐藏着一个小bug。如果需要打印部分有<a href="www.aaa.com">XXX</a>, 你在chrome打印预览的时候会发现href中的内容也会被打印出来。把href="www.aaa.com" 替换成空格即可。bbb.replace(/href=/g,"");