1. 首頁
  2. 問答
  3. AngularJs - 如何在Chrome應用程序中打印模式彈出div內容？

AngularJs - 如何在Chrome應用程序中打印模式彈出div內容？

2016-12-14 77 views
0

我正在創建一個Chrome應用程序。我必須打印使用angular.js模式彈出的div內容。在HTML頁面上，它工作正常，但在Chrome應用程序document.open()和document.write()不起作用。等待最佳結果？請找到下面的代碼。AngularJs - 如何在Chrome應用程序中打印模式彈出div內容？

 <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <link href="https://cdn.healthscion.com/Zureka/compressfile/css/bootstrap.min.css.jgz" rel="stylesheet" type="text/css" /> 
    <script src="https://cdn.healthscion.com/Zureka/compressfile/scripts/jquery-2.1.1.min.js.jgz" type="text/javascript"></script> 
    <script src="https://cdn.healthscion.com/Zureka/compressfile/scripts/bootstrap.min.js.jgz" type="text/javascript"></script> 
    <script src="https://cdn.healthscion.com/Scripts/angular1.2.25.min.js"></script> 


    </head> 
    <body> 
    <div data-ng-app="UnitApp" data-ng-controller="UnitController"> 


     <!-- Button trigger modal --> 
     <button type="button" class="btn btn-primary btn-lg onPrint" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
        </div> 
        <div class="modal-body"> 
         <div ng-repeat="model in friends track by model.id"> 
          My Friends Name Is: {{model.name}} 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-ng-click="onClear()">Close</button> 
         <button type="button" class="btn btn-primary onPrint" data-ng-click="onprint()">Print Code</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    </body> 
    </html> 
    <script> 
    var UnitApp = angular.module("UnitApp", []); 
    UnitApp.service("UnitAppservice", function ($http) { 
    }); 
    UnitApp.controller("UnitController", function ($scope, $compile, UnitAppservice) { 
     var _ = $scope; 

     _.friends = [ 
      { name: 'John', id: 1 }, 
      { name: 'Jessie', id: 2 }, 
      { name: 'Johanna', id: 3 }, 
      { name: 'Joy', id: 4 } 
     ]; 
     _.onprint = function() { 
      debugger 
      $('.onPrint').css('display', 'none'); 
      var contents = document.getElementById("myModal").innerHTML; 
      var frame1 = document.createElement('iframe'); 
      frame1.name = "frame1"; 
      frame1.style.position = "absolute"; 
      frame1.style.top = "-1000000px"; 
      document.body.appendChild(frame1); 
      var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument; 
      frameDoc.document.open(); 
      frameDoc.document.write('<html><head><title>DIV Contents</title>'); 
      frameDoc.document.write('</head><body>'); 
      frameDoc.document.write(contents); 
      frameDoc.document.write('</body></html>'); 
      frameDoc.document.close(); 
      window.print(); 
     } 
     _.onClear = function() { 
      $('#myModal').modal('hide'); 
      $('.onPrint').css('display', 'inline-block'); 
     } 
    }); 
</script>

來源

2016-12-14 4605786

回答

0

請在下面找到工作演示

曾使用它使用angularised控制UI bootstrap模式彈出。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 
 

 
    $scope.animationsEnabled = true; 
 

 
    $scope.friends = [ 
 
      { name: 'John', id: 1 }, 
 
      { name: 'Jessie', id: 2 }, 
 
      { name: 'Johanna', id: 3 }, 
 
      { name: 'Joy', id: 4 } 
 
    ]; 
 

 
    $scope.print = function() { 
 
     window.print(); 
 
    } 
 

 

 
    $scope.open = function (size) { 
 
     var modalInstance = $uibModal.open({ 
 
      animation: $scope.animationsEnabled, 
 
      templateUrl: 'myModalContent.html', 
 
      controller: 'ModalInstanceCtrl', 
 
      size: size, 
 
      resolve: { 
 
       items: function() { 
 

 
        return $scope.friends; 
 
       } 
 
      } 
 
     }); 
 

 
     modalInstance.result.then(function() { 
 

 
     }, function() { 
 
      $log.info('Modal dismissed at: ' + new Date()); 
 
     }); 
 
    }; 
 

 

 
}); 
 

 
// Please note that $modalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) { 
 

 
    $scope.friends = items; 
 

 

 
    $scope.print = function() { 
 
     window.print(); 
 
    } 
 

 
    $scope.ok = function() { 
 
     $modalInstance.close(); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
     $modalInstance.dismiss('cancel'); 
 
    }; 
 
});
/**Modal Styles for Print**/ 
 

 
       @media print { 
 
        body * { 
 
         visibility: hidden; 
 
        } 
 

 
        #print-content * { 
 
         visibility: visible; 
 
         overflow: visible; 
 
        } 
 

 
        #mainPage * { 
 
         display: none; 
 
        } 
 

 
        .modal { 
 
         position: absolute; 
 
         left: 0; 
 
         top: 0; 
 
         margin: 0; 
 
         padding: 0; 
 
         min-height: 550px; 
 
         visibility: visible; 
 
         /**Remove scrollbar for printing.**/ 
 
         overflow: visible !important; 
 
        } 
 

 
        .modal-dialog { 
 
         visibility: visible !important; 
 
         /**Remove scrollbar for printing.**/ 
 
         overflow: visible !important; 
 
        } 
 

 
        li { 
 
         page-break-after: auto; 
 
        } 
 
       }
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <div ng-controller="ModalDemoCtrl"> 
 
     <script type="text/ng-template" id="myModalContent.html"> 
 
      <div id="print-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" ng-click="$dismiss()" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <div class="modal-body"> 
 
         <div ng-repeat="model in friends track by model.id"> 
 
          My Friends Name Is: {{model.name}} 
 
         </div> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-default" ng-click="$dismiss()" data-ng-click="onClear()">Close</button> 
 
         <button class="btn btn-primary pull-right" ng-click="print()">Print</button> 
 
        </div> 
 

 
       </div> 
 
      </div>   
 
     </script> 
 
     <div id="mainPage"> 
 
      <button type="button" class="btn btn-primary" ng-click="open('lg')">Launch demo modal</button> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-12-14 09:30:02

0

更新您的解決方案，而無需使用UI引導

使用@media打印改變設計，同時打印。

檢查下面的演示： -

(function() { 
 
    'use strict'; 
 

 
    var UnitApp = angular.module("UnitApp", []); 
 

 
    UnitApp.controller("UnitController", function ($scope) { 
 
     
 

 
     $scope.friends = [ 
 
      { name: 'John', id: 1 }, 
 
      { name: 'Jessie', id: 2 }, 
 
      { name: 'Johanna', id: 3 }, 
 
      { name: 'Joy', id: 4 } 
 
     ]; 
 

 
     $scope.onprint = function() { 
 
      window.print(); 
 
     }  
 
    }); 
 

 
})();
<!doctype html> 
 
<html> 
 
<head> 
 
    <title>Test</title> 
 
    <!-- Included here because the External Resources panel is annoying to use --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 

 
    <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
 
    <style> 
 
     @media print { 
 
      body * { 
 
       visibility: hidden; 
 
      } 
 

 
      .print-content * { 
 
       visibility: visible; 
 
       overflow: visible; 
 
      } 
 

 
      #mainPage * { 
 
       display: none; 
 
      } 
 

 
      .modal { 
 
       position: absolute; 
 
       left: 0; 
 
       top: 0; 
 
       margin: 0; 
 
       padding: 0; 
 
       min-height: 550px; 
 
       visibility: visible; 
 
       /**Remove scrollbar for printing.**/ 
 
       overflow: visible !important; 
 
      } 
 

 
      .modal-dialog { 
 
       visibility: visible !important; 
 
       /**Remove scrollbar for printing.**/ 
 
       overflow: visible !important; 
 
      } 
 

 
      li { 
 
       page-break-after: auto; 
 
      } 
 
      .onPrint { 
 
       display:none; 
 
      } 
 
     } 
 
    </style> 
 
</head> 
 
<body ng-app="UnitApp"> 
 
    <div ng-controller="UnitController"> 
 

 
     <!-- Button trigger modal --> 
 
     <button type="button" class="btn btn-primary btn-lg onPrint" data-toggle="modal" data-target="#myModal"> 
 
      Launch demo modal 
 
     </button> 
 

 
     <!-- Modal --> 
 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
      <div class="modal-dialog print-content" role="document"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close onPrint" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
         <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
        </div> 
 
        <div class="modal-body"> 
 
         <div ng-repeat="model in friends track by model.id"> 
 
          My Friends Name Is: {{model.name}} 
 
         </div> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-default onPrint" data-dismiss="modal">Close</button> 
 
         <button type="button" class="btn btn-primary onPrint" data-ng-click="onprint()">Print Code</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2016-12-14 11:01:17

+0

這上面的回答是你的解決方案的更新，如果你不想使用的用戶界面引導 –

相關問題

 相關問題