Question

我正在尝试打印一张运输标签（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页;第二页完全空白。

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

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

我错过了什么？

Answer 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;
  }
}

Answer 2

＆＃34;第二页完全空白＆＃34;

这可能会有所帮助：

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

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

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

2 个答案:

替代版本