Question

我在我的应用程序中使用了一个对话框，其中显示了内容和页脚。当用户打印页面时（通过按打印模式按钮），此页脚应位于打印页面的底部：

<div class="footer">
   This should be the footer at printing page
</div>

但它位于对话框的底部。我现在的问题是，是否有可能在页面底部移动页脚？

My Problem

Answer 1

这是一个相当难的问题，我认为没有简单的答案。但是，我能够使用vh单位获得您想要的行为：

@media print {
  .control {
    display: none;
  }
  .footer {
    top: 100vh !important; /*position below the bottom of the page*/
    margin-top: -30px; /*move back up by the height of the footer*/
  }
}

您也可以使用calc()代替负余量：

@media print {
  .control {
    display: none;
  }
  .footer {
    top: calc(100vh - 30px) !important;
  }
}

Updated JSFiddle

Answer 2

从头顶开始快速修复。如果您知道打印页面的类型，例如A4（8.3 x 11.7英寸），Letter（8.5 x 11英寸）等。然后在@media print查询中添加以下类，并根据打印页面大小设置底部。对于你分享的小提琴和我系统上的打印设置。 @media print中的下面的底部负边距做了这个伎俩。

.footer {
    bottom: -650px  !important;
}

希望这有帮助

[编辑 - jQuery解决方案]

这是一个jquery解决方案，它通过从打印页面高度减去模态高度来自动计算边距，以调整打印的页脚。请执行以下操作：

从.footer查询中删除带有底部的@media print类。

将jquery脚本cdn添加到页面。更改打印按钮的onClick属性，如下所示

<button onClick="javascript:PrintPage();" type="button" class="btn btn-default printButton">Print Modal</button>

在最后的脚本标记中添加以下功能。

function PrintPage()
{
   var ftr = $(".footer");
   var modalHeight = $(".modal-dialog").height();
   var newBottom = (892-modalHeight); //based on A4 page size height in pixels at 72 dpi (842) + margins (40px) . Adjust both as required.
   ftr.css("top","+=" + newBottom); // Add the empty calculated value in the top margin of the footer
   window.print(); // open print dialog
   ftr.css("top","-=" + newBottom); // reset the footer back to original position in html.
}

希望这个解决方案有所帮助。

Bootstrap Modal对话框 - 页脚应位于打印页面的底部

2 个答案: