Bootstrap 打印时模态显示内容下方的边框

Question

我有一个 Angular 为 POS 系统编写的 JS 应用程序。我有模式 window 弹出供用户打印收据。 window 弹出窗口和超时，调用 window.print。我想从模态打印的所有内容都显示出来了，但出于某种原因，我只在打印时看到我的内容下方有一个带圆角的大框。

我不确定解决该问题的最佳方法，因为我在源代码和屏幕上都没有看到它。我只在打印预览和打印页面中看到它。关于如何在那里检查实际 html 的任何想法？

打印css

@media print {
  body * {
    visibility:hidden;
  }
  .printSection, .printSection * {
    visibility:visible;
  }
  .printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

渲染html

<div uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-backdrop="modal-backdrop" modal-animation="true" class="fade modal-backdrop in" style="z-index: 1040;"></div>
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in" uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}" uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true" data-vivaldi-spatnav-clickable="1" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-sm" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" uib-modal-transclude=""><table style="width: 3.125in; margin: 0.25in 0" id="receipt" class="printSection ng-scope">
<tbody>
<tr>
    <td colspan="4" class="center ng-binding">2/25/2019 12:27 pm</td>
</tr>
<tr>
    <td colspan="4" class="center ng-binding">Invoice #: 433</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<tr>
    <td colspan="4" class="center ng-binding"></td>
</tr>
<!-- ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Nerf</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        25.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        25.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Standard Group</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        105.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        105.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">10</td>
    <td class="ng-binding">Test 0</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Play</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Electric Boogaloo</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        8.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        8.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Test 0</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details -->
<tr>
    <td colspan="3" class="right">Sub Total:</td>
    <td class="right ng-binding">138.00</td>
</tr>
<!-- ngRepeat: tax in rcptCtrl.invoice.taxes --><tr ng-repeat="tax in rcptCtrl.invoice.taxes" class="ng-scope">
    <td colspan="3" class="right ng-binding">Sales Tax:</td>
    <td class="right ng-binding">11.47</td>
</tr><!-- end ngRepeat: tax in rcptCtrl.invoice.taxes -->
<tr>
    <td colspan="3" class="right">Total:</td>
    <td class="right ng-binding">149.47</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<!-- ngRepeat: payment in rcptCtrl.payments --><tr ng-repeat="payment in rcptCtrl.payments" class="ng-scope">
    <td colspan="3" class="right ng-binding">Cash:</td>
    <td class="right ng-binding">149.47</td>
</tr><!-- end ngRepeat: payment in rcptCtrl.payments -->
<tr>
    <td colspan="3" class="right">Total Payments:</td>
    <td class="right ng-binding">149.47</td>
</tr>
<tr>
    <td colspan="3" class="right">Change:</td>
    <td class="right ng-binding">0.00</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<tr>
    <td colspan="4" class="center">
        <span ng-bind-html="rcptCtrl.blurb | toTrusted" class="ng-binding"><div>Boo Yah!</div><div>&nbsp;</div><div>Boo Yah!&nbsp;</div></span>
    </td>
</tr>
</tbody></table></div></div>
</div>

Answer 1

您可以使用开发工具将设备渲染设置为特定工作表，然后检查 dom 来调试问题。

Bootstrap 打印时模态显示内容下方的边框

Bootstrap modal showing border under content when printing

angular-ui-bootstrap

twitter-bootstrap-3