Угловой JS print div

У меня есть директива, специально отформатированная для печати. Он открывается в модальном всплывающем окне и готов к печати сразу.Угловой JS print div

Я использую плагин jquery, который может печатать div.

Кажется, это должно быть так просто, как это

$($element).printArea(); или $(element).printArea(); и это работает ... вроде ... Я получаю некомпилированную версию директивы с {{stuff}}

Я попытался положить $(element).printArea(); как в директиве, так и в контроллере с таким же результатом ...

Любая помощь будет оценена по достоинству. Спасибо!

источник

2014-08-08 americanslon

Как вы его описываете, вы должны передать готовую строку html методу печати, создать iframe и напечатать это.

Пример:

.controller('ModalCtrl', function ($scope, $modal, $log) { 
    $scope.open = function (yourdataobject) { 
    $scope.items = yourdataobject; 

    var modalInstance = $modal.open({ 
     template: '<div id="printme"><div class="modal-header">' + 
      '<h3 class="modal-title">{{items.name + " " + items.surname }}</h3>' + 
     '</div>' + 
     '<div class="modal-body">' + 
      '<ul class="list-group">' + 
       '<li class="list-group-item">' + 
        {{ items.whatever }}' + 
       '</li>' + 
      '</ul>' + 
     '</div></div>' + 
     '<div class="modal-footer">' + 
      '<a class="btn btn-primary" href="#" print-div="#printme"><span class="glyphicon glyphicon-print"></span> Print</a>' + 
      '<button class="btn btn-primary" ng-click="ok()">Close</button>' + 
     '</div>', 
     controller: ModalInstanceCtrl, 
     size: '500', 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
    });

Теперь это сделает вашу модальность с любыми данными, и вам нужно директива, чтобы сделать печать:

.directive('printDiv', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 

     element.bind('click', function(evt){ 
     evt.preventDefault(); 
     PrintElem(attrs.printDiv); 
     }); 

     function PrintElem(elem) { 
     PrintWithIframe($(elem).html()); 
     } 

     function PrintWithIframe(data) { 
     if ($('iframe#printf').size() == 0) { 
      $('html').append('<iframe id="printf" name="printf"></iframe>'); 

      var mywindow = window.frames["printf"]; 
      mywindow.document.write('<html><head><title>Put a title if you want</title><style>@page {margin: 25mm 0mm 25mm 5mm;font-size:16pt;}</style>' + 
         '</head><body style="font-size:15pt !important;"><div>' + 
         data + 
         '</div></body></html>'); 

      $(mywindow.document).ready(function(){ 
      mywindow.print(); 
      setTimeout(function(){ 
       $('iframe#printf').remove(); 
      }, 
      2000); 
      }); 
     } 

     return true; 
     } 
    } 
    }; 
});

Это модифицированный код от чего я использую и знаю, что это работает, но я мог бы что-то упустить, поэтому дайте мне знать.

источник

2014-08-08 16:41:25 alou

В этой строке 'PrintWithIframe ($ (elem) .html());' вы ожидаете, что '$ (elem) .html()' будет скомпилирован или еще есть {{stuff}} '? – americanslon

Угловой JS print div

ответ

Смежные вопросы