HTML/CSS - 打印内容溢出到空白页面答案

【问题标题】：HTML/CSS - Print content overflowing to an empty pageHTML/CSS - 打印内容溢出到空白页面
【发布时间】：2016-12-08 10:23:35
【问题描述】：

我正在尝试打印出现在我的应用程序的引导模式中的发货标签（4 英寸 x 6 英寸）。

这是我的印刷媒体 CSS ：

@media print {
body * {
    visibility: hidden;
}
#print-content * {
    visibility: visible;
    height: auto;
    width:auto;
    max-width: 100%;
    max-height: 100%;  
}
.modal{
    position: absolute;
    left: 0;
    top: 0;

}

@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;

}
}

这是我的带有运输标签图像的模态内容：

<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 " id="print-content">  
       <img class="img-responsive" ng-if="labelLoaded" data-ng-src="data:image/jpeg;base64,{{myImage}}">
       <img ng-hide="labelLoaded" ng-src="">
  </div>

我的图像在我的 Chrome 的“打印预览”中显示良好 - 除了它显示 2 页而不是 1 页；第二页完全空白。

我花了一个小时试图找出问题所在 - 但没有任何进展。

我使用日本明信片作为纸张尺寸，因为它最接近运输标签。

我错过了什么？

【问题讨论】：

标签： html css twitter-bootstrap printing

【解决方案1】：

“第二页完全空白”

这可能会有所帮助：

* {
  font-size: 1em !important;
  line-height: 1 !important;
}

似乎不是模态问题，而是这里描述的Remove blank page when printing on google chrome

【讨论】：

【解决方案2】：

我看到的问题是您正在设置：

body * {
  visibility: hidden;
}

visibility: hidden; 与 display: none 等属性的不同之处在于，可见性只是使元素对用户不可见，但它实际上仍在页面上，并保持其尺寸和位置。我最大的猜测是模态下的所有内容仍然存在，因此打印版本会出现在第 2 页。

一种方法是改用display: none，或者如果您将模态框放置在主要内容区域之外（我通常这样做），只需隐藏主要内容即可。

<body>
  <main></main>
  <div class="modal"></div>
</body>

CSS：

main {
  display: none;
}

这是一个使用以下策略的测试：http://jerrylow.com/demo/stackoverflow/38731021.html。我所做的唯一区别是仅在打开模式时打印目标主要。

@media print {
  body.modal-open main {
    display: none;
  }
}

替代版本

如果你真的无法控制 dom，那么这里有一个版本可能适用于你所拥有的：http://jerrylow.com/demo/stackoverflow/38731021-3.html。这实际上只是使用了 visibility: hidden 就像你以前一样，但是因为它们仍然占据不止一页，所以我会将 font-size 降低到 0 并恢复模态的字体大小。如果您确实无法修改 dom，这是不得已的方法。如果模态框后面的内容有图片占空间等其他元素，我不推荐这种方式。

@media print {
  body.modal-open * {
    font-size: 0;
    visibility: hidden;
  }

  .modal.in,
  .modal.in * {
    font-size: 1.8rem;
    visibility: visible;
  }
}

【讨论】：

我认为你是对的 - 但是一旦我说 display:none - 我也看不到我的模态内容，即使我的 printable-content div 说 visibility:visible ，我应该试试也改变？显示：块；似乎没有成功。
您的模态是否在主容器之外？我将用我在这里所做的更新原始示例：jerrylow.com/demo/stackoverflow/38731021.html
没有。问题是 - 我正在使用一个通用模板（用于页眉、页脚、正文等） - 并根据我的 Angular 控制器和模板添加其他 div/模态。所以问题是 - 我无法显示：没有正文，它会隐藏我所有的模板；我正在尝试使用我的 div，但它变得一团糟。
另外 - 我的模式中有一张图片 - 这是我需要打印的 - 没有别的。我确实有某些按钮和边框，这就是我有一个可打印内容 ID 的原因。
好吧，从你所说的我只能想到最后一种方法。用替代版本更新了答案。