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

最新推荐文章于 2024-02-01 15:38:43 发布

阿利518

最新推荐文章于 2024-02-01 15:38:43 发布

阅读量4.7k

点赞数

分类专栏：前端技术文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/derek518/article/details/51450767

版权

前端技术专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用CSS对HTML指定区域进行打印，并详细讲述了如何消除打印时的header和footer信息，包括针对Chrome和Firefox的不同解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

仅供参考。