2016-08-30 4 views
1

Мне нужно распечатать содержимое div с помощью button. Я искал его и нашел выход, чтобы сделать это в AngularJS.Печать div без открытия нового окна в AngularJS

Моя проблема - всякий раз, когда вызывается печать, она также открывает новое окно; он не должен его открывать.

Есть ли способ заблокировать открытие нового окна?

Код ниже:

JS:

$scope.printControl = function(id) { 
    var printContents = document.getElementById(id).innerHTML; 
    var popupWin = $window.open('', '_blank', 'width=800,height=800'); 
    popupWin.document.open(); 
    popupWin.document.write('<html><body onload="window.print()">' + printContents + '</body></html>'); 
    popupWin.document.close(); 
};  

HTML:

<div id="printDiv"> 
    This div needs to be printed 
    </div> 
    <button ng-click="printControl('printDiv')"> 
    Print 
</button> 

Demo

+0

Ну, вы действительно определили в своем JS, чтобы открыть новое окно ($ window.open ('', '_blank' ...). Вы можете заменить «_blank» на «_self». Это откроет запрос на печать В то же самое время я не могу отвлечься от него. Но я считаю, что вы не можете вообще игнорировать это приглашение, поскольку пользователь должен иметь последний контроль над самой печатью по соображениям безопасности. – Martin

+0

@ Мартин, делая это, я могу видеть содержимое 'div' в самом окне, которое я не хочу. – Shashank

ответ

1

Я бы просто сделать:

$scope.printControl = function(id) { 
    $scope.visible = true; 
    $timeout(function(){ 
     $window.print();   
     $timeout(function(){ 
      $scope.visible = false; 
     }, 0); 
    }, 0); 
}; 

и изменить кнопки таким образом:

<button ng-click="printControl('printDiv')" ng-hide="visible"> 

идея заключается в том, чтобы скрыть элементы, которые вы не хотите, чтобы напечатать в вашей йот при нажатии на кнопку, чтобы распечатать и повторно показать их сразу после.

ссылка на обновленный fiddle.

+0

Весь текст' html' печатается. Должен быть напечатан только 'div'. – Shashank

+0

Я боюсь, что это единственный способ сделать это, не открывая новое окно istance, давайте надеяться на другое решение. – Luxor001

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