Question

我正在尝试这样做，以便当我尝试打印我的页面时，唯一打印的是该页面上的1个长单个div。

经过一番研究后，我想出了如何限制浏览器只使用@media print打印某些元素，并为我不想显示的元素设置隐藏可见性。

这是我目前用来完成此任务的CSS：

@media print {
html, body{
    overflow-y: hidden;
}
body * {
    visibility: hidden;
}

table {
    float: none !important;
}
div {
    float: none !important;
}


#PermitDetails, #PermitDetails * {
    visibility: visible;
}

#PermitDetails {
    position: absolute;
    top: 0px;
    left: 0px;
}
}

此代码允许PermitDetails div在打印时显示，并在打印时隐藏任何其他元素（和滚动条）。

这是PermitDetails div的代码：

<div class="col-md-12 col-lg-10">
    <div class="panel panel-default" id="PermitDetailsPanel">
        <div class="panel-heading">
            <strong>Permit Details</strong>
        </div>
        <div class="panel-body" id="PermitDetails">
        </div>
    </div>
</div>

此div根据用户在页面上选择的选项动态填充，因此它的大小始终不同。

我遇到的问题是，如果我尝试打印页面，我只会看到具有正确信息的div，但是有一些错误：

即使我将div的位置设置为绝对位置，并且将left和top设置为0，它仍然将自身定位在页面的中心。我还注意到它根据我当前滚动到的页面中的位置向上或向下移动。
如果我选择了div填充页面的足够信息，则信息不会移动到第二页上进行打印。它只是填满了第一页，一旦到达底部就会被切断。这也会根据我在页面上滚动的位置移动。

我读到这可能是由于bootstrap如何浮动列，所以我尝试将div标签设置为浮点数：在css中没有（如上所示），但这并没有改变任何东西。

我真的不确定问题可能是什么。任何帮助将不胜感激。如果需要更多信息，请告诉我。

无法通过@media print获取css以使其正常工作

0 个答案: