Firefox打印图片无法居中最大化及去除打印附加信息的解决方法

一、去掉打印时的URL、时间戳等附加信息 #

不管是Chrome还是Firefox，都能通过打印专属的CSS规则干掉默认的页眉页脚：

@media print {
  /* 重置页面边距，同时隐藏Chromium系浏览器的页眉页脚 */
  @page {
    margin: 0;
  }
  /* 强制清空Firefox自动添加的页眉页脚内容 */
  body::before, body::after {
    content: "" !important;
  }
  /* 页面里其他不需要打印的元素，直接隐藏 */
  .non-print {
    display: none !important;
  }
}

要是不想完全去掉边距，把margin: 0改成margin: 1cm这类数值就行，灵活调整。

二、修复Firefox打印图片不居中、最大化的问题 #

Firefox打印时的布局逻辑和Chromium系不一样，得针对性调整CSS，确保图片横向铺满、居中：

@media print {
  /* 强制打印页面为横向 */
  @page {
    size: landscape;
    margin: 0;
  }
  /* 重置body样式，用flex布局实现全局居中 */
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }
  /* 给目标图片设置打印样式 */
  img.print-target {
    /* 最大化利用页面空间，同时保持图片比例 */
    max-width: 100vw;
    max-height: 100vh;
    /* 强制Firefox识别居中 */
    margin: auto;
    /* 防止图片被分页截断 */
    page-break-inside: avoid;
  }
}

用法提示： #

• 给要打印的图片加个print-target类，别让样式影响其他图片
• 要是需要纵向打印，把size: landscape改成size: portrait
• 去Firefox打印预览里检查下缩放设置，选“适合页面”或者“无缩放”，不然浏览器自动缩放会搞砸效果

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 普通页面的图片样式 */
    img {
      max-width: 100%;
      margin: 0 auto;
      display: block;
    }
    /* 打印专属样式 */
    @media print {
      @page {
        size: landscape;
        margin: 0;
      }
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
      }
      body::before, body::after {
        content: "" !important;
      }
      img.print-target {
        max-width: 100vw;
        max-height: 100vh;
        margin: auto;
        page-break-inside: avoid;
      }
      .non-print {
        display: none !important;
      }
    }
  </style>
</head>
<body>
  <img src="your-image-path.jpg" class="print-target" alt="待打印图片">
  <div class="non-print">这些内容打印时会被隐藏</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Lonnie Best