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

时间:2016-08-02 21:45:30

标签: html css twitter-bootstrap printing

我正在尝试打印一张运输标签(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&#34;打印预览&#34; - 除了它显示2页而不是1页;第二页完全空白。

我花了一个小时试图弄清楚什么是错的 - 但没有进展。

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

我错过了什么?

2 个答案:

答案 0 :(得分:1)

我看到的问题是你正在设置:

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。这实际上只是使用可见性:隐藏,因为它们仍然占用多个页面,我将字体大小降低到0并恢复模式的字体大小。如果你真的无法修改dom,这是最后的手段。如果模态背后的内容具有其他元素(如图像占用空间),我不建议使用此方法。

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

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

答案 1 :(得分:0)

  

&#34;第二页完全空白&#34;

这可能会有所帮助:

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

似乎不是模态问题,但这里描述的内容Remove blank page when printing on google chrome