在 Chrome 中打印弹出窗口

Question

我正在尝试打印一个弹出窗口。我使用 Chrome，在其他浏览器中我不感兴趣。 这是我的弹出窗口：

这是我想打印时的预览：

问题很明显：如何只打印弹出窗口的内容？

PD：我放了角度标签，因为我使用它。调用模态窗口（popup）的方式是；

$scope.printPopup = function () {
        $scope.opManSel = this.dataItem;
        $modal.open({
            templateUrl: '/OM_manager/printPopup',
            backdrop: 'static',     
            controller: 'printPopupController',
            scope: $scope
        });
    }

美好的一天！

更新： 在我的 CSS 中，我使用：

.noprint { display: none; }
#print{
    visibility: visible;
    display: block;
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

我的弹出窗口具有 id="print" 和其余元素具有类 'noprint'，即使如此，背景显示。

Answer 1

您可以使用一些 css 来仅打印弹出窗口。如果您希望页面在弹出窗口以外的情况下正常打印，例如，您可以添加以下代码：

在你的 CSS 中：

@media print {
  .noprint {
    display: none;
  }
}

然后，在 printpopup 函数中，您可以将 .noprint 类添加到包含除弹出窗口之外的所有内容的 div 中（假设您的 html 以这种方式组织；如果不是，则该概念仍然适用）。确保在弹出窗口关闭时删除 .noprint 类。