Question

我有一个桌子和两个弹出窗口，我打算在调用动作时打印出来。我遇到的问题是css中的分页符不起作用，我尝试过的其他解决方案也没有。目前，两个弹出窗口显示在表格数据的顶部，我希望将它们放在新页面上或一个接着一个。

HTML

<div class="printable">

<table class="table">
    <th>Option 1</th>
    <th>Option 2</th>
    <tr>
        <td><input class="span6 text-center" type="text" id="cost1"></td>
        <td><input class="span6 text-center" type="text" id="cost2"></td>
    </tr>
</table>

    <div class="popup" data-popup="popup1">
        <p>Need to print this as well</p>
    </div>

    <div class="popup" data-popup="popup2">
        <p>Need to print this as well</p>
    </div>

    <input type="button" value="Print" class="btn btn-success" onclick="window.print();" />
</div>

CSS

.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

@media print {
    body * {
        visibility: hidden;
      }
     .printable * {
        visibility: visible;
     }
     .popup {
         display: block;
     }
}

Answer 1

根据w3c（参见fixed部分）：https://www.w3.org/TR/CSS21/visuren.html#propdef-position

UA不得对固定框的内容进行分页。

即使您将position: fixed设置为秒top: 100%，.popup也可以进行分页。

在您的示例中，第二个.popup覆盖了第一个。

将.popup的位置更改为absolute并将第二个位置改为此风格：

.popup:nth-of-type(2) {
  page-break-before: always;
  top: 100%;
}

https://jsfiddle.net/fp2gkm17/

带有窗口打印的新页面

1 个答案: