我正在尝试打印一张运输标签(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页;第二页完全空白。
我花了一个小时试图弄清楚什么是错的 - 但没有进展。
我使用日本明信片作为纸张尺寸,因为它最接近运输标签。
我错过了什么?
答案 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