Imprimer un div en utilisant javascript dans l'application d'une page d'angularJS

j'ai une application web d'une page utilisant angularJS. J'ai besoin d'imprimer un div de la page. J'ai essayé le code suivant:

la page contient peu de div (print.html)

<div>
  <div>
    Do not print
  </div>
  <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>
</div>

le contrôleur a le script suivant:

$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

ce code affiche la div désirée mais il y a un problème. la déclaration document.body.innerHTML = originalContents; remplace le corps de l'ensemble de la demande puisqu'il s'agit d'un SPA. Ainsi, lorsque je rafraîchis la page ou cliquez à nouveau sur le bouton Imprimer, l'ensemble du contenu de la page est effacée.

31
demandé sur Cœur 2014-03-05 09:42:52

6 réponses 

$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 + '</body></html>');
  popupWin.document.close();
}
86
répondu Anand Natarajan 2016-01-21 05:08:51

Deux fonctions conditionnelles sont nécessaires: un pour Google Chrome, et une seconde pour les autres navigateurs.

$scope.printDiv = function (divName) {

    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;      

    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
        var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWin.window.focus();
        popupWin.document.write('<!DOCTYPE html><html><head>' +
            '<link rel="stylesheet" type="text/css" href="style.css" />' +
            '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></html>');
        popupWin.onbeforeunload = function (event) {
            popupWin.close();
            return '.\n';
        };
        popupWin.onabort = function (event) {
            popupWin.document.close();
            popupWin.close();
        }
    } else {
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        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();
    }
    popupWin.document.close();

    return true;
}
10
répondu Amit Jadli 2014-08-19 16:55:35

Vous pouvez maintenant utiliser la bibliothèque appelée angulaires-print

7
répondu TMichel 2015-09-04 07:23:53

j'ai fait de cette façon:

$scope.printDiv = function (div) {
  var docHead = document.head.outerHTML;
  var printContents = document.getElementById(div).outerHTML;
  var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";

  var newWin = window.open("", "_blank", winAttr);
  var writeDoc = newWin.document;
  writeDoc.open();
  writeDoc.write('<!doctype html><html>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
  writeDoc.close();
  newWin.focus();
}
1
répondu Azhar 2016-08-02 07:01:42

C'est ce qui a fonctionné pour moi dans Chrome et Firefox! Cela ouvrira la petite fenêtre d'impression et la fermera automatiquement une fois que vous aurez cliqué sur Imprimer.

var printContents = document.getElementById('div-id-selector').innerHTML;
            var popupWin = window.open('', '_blank', 'width=800,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no,top=50');
            popupWin.window.focus();
            popupWin.document.open();
            popupWin.document.write('<!DOCTYPE html><html><head><title>TITLE OF THE PRINT OUT</title>' 
                                    +'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />' 
                                    +'</head><body onload="window.print(); window.close();"><div>' 
                                    + printContents + '</div></html>');
            popupWin.document.close();
0
répondu tyborg 2016-08-02 07:45:33

Je ne pense pas qu'il soit nécessaire d'écrire autant de gros codes.

je viens d'installer le paquet de bower à impression angulaire et tout est prêt.

il suffit de l'injecter dans le module et vous êtes prêt à aller Utilisez des directives d'impression pré-compilées & le plaisir est que vous pouvez également cacher quelques div si vous ne voulez pas imprimer

http://angular-js.in/angularprint/

Mine de travail est génial .

-3
répondu Palak Dhingra 2017-06-30 12:43:05