码迷,mamicode.com
首页 > 其他好文 > 详细

关于打印

时间:2016-12-30 16:45:23      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:拼接字符串   将不   str   window   打印预览   ati   分区   方法   笔记   

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

关于打印

标签:拼接字符串   将不   str   window   打印预览   ati   分区   方法   笔记   

原文地址:http://www.cnblogs.com/mmkan/p/6237081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!