javascript实现打印html制定区域同时消除header/footer区域

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/derek518/article/details/51450767

通过CSS实现制定区域打印

在css文件里添加如下代码:

@media print {
  .print { display:block; }
  .nprint { display:none; }
}

用以上CSS类print对需要打印的区域块(比如div等)进行修饰,用nprint对不需要打印的区域块进行修饰。如下:

<div className="print">
...需要打印的部分
</div>
<div className="nprint">
...不需要打印的部分
</div>

调用window.print()进行打印即可,但这里还有一个问题就是浏览器默认会打印header中的标题、网址以及时间等信息。

消除header/footer区域信息

这个问题对不同浏览器没有统一的解决办法,针对chrome,可在@media print {}里在加入以下相应代码:

@media print {
  @page 
  {
      size: auto;   /* auto is the current printer page size */
      margin: 0mm;  /* this affects the margin in the printer settings */
  }

  body 
  {
      background-color:#FFFFFF; 
      border: solid 1px black ;
      margin: 0px;  /* the margin on the content before printing */
 }
  .print { display:block; }
  .nprint { display:none; }
}

针对firefox,可通过添加html关键字属性进行解决。

<html>

==>

<html moznomarginboxes mozdisallowselectionprint>.

仅供参考。

展开阅读全文

没有更多推荐了,返回首页