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

通过CSS实现制定区域打印

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

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

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

"print"> ...需要打印的部分
"nprint"> ...不需要打印的部分

调用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>.

仅供参考。

你可能感兴趣的:(前端技术)