关于打印

Posted 2020-08-25

要实现网页打印其实很简单，一个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,"");