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

来源：互联网发布：js什么叫框架编辑：程序博客网时间：2024/05/01 04:17

通过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>.

仅供参考。

0 0