Question

您好我正在开发angularjs中的打印功能。我跟着this。我有一个按钮，然后单击我想要打印。例如，我想打印下面的内容。

<div id="printThis" >
    This should BE printed!
    <div class="modifyMe">old</div>
</div>

我面临的问题是我不想在网页中显示printThis。实际上，我正在通过范围变量来获取页面。如果我使用bg-show或任何其他方式隐藏该div我在打印预览中变得空白！我可以帮助解决这个问题吗？我计划实施它的实施方式here。任何帮助，将不胜感激。谢谢。

Answer 1

您可以使用Bootstrap类 .hidden-print 来隐藏打印div，也可以使用以下css代码：

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

您必须将 .no-print 类用于要隐藏的div。

Answer 2

您可以使用ng-click进行此类切换

<div id="printThis" ng-if="showPrint" ng-init="showPrint=false">
    This should BE printed!
    <div class="modifyMe">old</div>
</div>

<button type="button" ng-click="showPrint=!showPrint"></button>

如果您不想使用角度，请尝试使用

<强> HTML

<div class="hiddenVal">
  This should NOT be printed!
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<强> CSS

@media screen {
  .hiddenVal {
      display: none !important;
  }
}

工作演示：http://jsfiddle.net/95ezN/1659/

Answer 3

这是完整的解决方案（这里的代码片段不起作用，因为我认为不允许从代码段打开弹出窗口）：

＆＃13;

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
   $scope.printDiv = function(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', 'Print', 'height=600,width=1200');
            popupWin.document.open();
            popupWin.document.write('<html><head><title>ATLAS SEARCH</title></head><body class="print-screen" onload="window.print()"><table width="100%"><tr><td>&nbsp;</td></tr></table>' + printContents + '</body></html>');
            popupWin.document.close();
        } 
});

＆＃13;

@media print
{    
    .print-btn
    {
        display: none ;
    }
}

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div id="printThis" >
    This should BE printed!
    <div class="modifyMe">old</div>
</div>
<a class="print-btn btn btn-success" ng-click="printDiv()">Print</a>
</div>

＆＃13;

如何隐藏angularjs中的内容？

3 个答案: