2016-01-06 55 views
0

我有一個翡翠的HTML文件上的打印一個特定的div元素玉頁面

include ../../../public/UI-Master-Layout/Jade/userMenu.jade 
include ../../../public/UI-Master-Layout/Jade/footer.jade 
include ../../mixinHelp.jade 

div.container.cstm-panel-heading(ng-controller="studentInformationCtrl") 
.container 
    .row 
     .col-lg-12 
      div#printableArea 
      table.cstm-panel-heading.darkgray(align='center') 
       colgroup 
        col(width="50%") 
        col(width="50%") 
       tbody 
        tr 
         td(colspan='2' align='center') Student Information 
        tr 
         td First Name 
         td {{student.firstName}} 
        tr 
         td Last Name 
         td {{student.lastName}} 
      button.btn.btn-info.pull-right(type='button',ng-click="printDiv('printableArea')") Print 

我有我的控制器文件

angular.module('XXXX') 
.controller('studentInformationCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) { 
    $scope.printDiv = function(divName) { 
     var printContents = document.getElementById(divName).innerHTML; 
     var popupWin = window.open('', '_blank', 'width=300,height=300'); 
     popupWin.document.open() 
     popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>'); 
     popupWin.document.close(); 
    } 
}]); 

如果我只是做了$ window.print()我得到打印的值。但我試圖打印選定的div printableArea。我缺少了什麼

回答

0

經過一番搜索,我可以使用jQuery

$scope.printDiv = function(divName) { 
     var html = ""; 
     $('link').each(function() { 
      if ($(this).attr('rel').indexOf('stylesheet') !=-1) { 
       html += '<link rel="stylesheet" href="'+$(this).attr("href")+'" />'; 
      } 
     }); 
     html += '<body onload="window.focus(); window.print()">' + $("#" + divName).html()+'</body>'; 
     var w = window.open("","print"); 
     if (w) { w.document.write(html); w.document.close() } 
    } 
解決問題