Existe-t-il un moyen angulaire d’imprimer un div à partir d’une page HTML?

J'ai une page html en utilisant AngularJS, et je veux imprimer une div. Est-il Angulaire moyen de le faire? .. ou c'est juste le classique de façon javascript ci-dessous:

    <script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML =
        "<html><head><title></title></head><body>" +
        divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;
        }
    </script>

Si AngularJS ne pas avoir quelque chose autour de cela, pouvez-vous suggérer o façon de le faire, sans l'aide de fonctions JavaScript (ex: doc.getElementById() ).. une approche proche de la AngularJS ?

Thx,

source d'informationauteur Ursan Ionut

  1. 16

    J'ai créé une directive simple pour l'impression div contenu à l'aide de l'iframe technique. C'est un peu hackish, mais fonctionne très bien. il n'y a pas de meilleure façon de le faire à mon avis. La directive script est:

    'use strict';

angular.module('yourAppNameHere').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>');  //an iFrame is added to the html content, then your div's contents are added to it and the iFrame's content is printed

          var mywindow = window.frames["printf"];
          mywindow.document.write('<html><head><title></title><style>@page {margin: 25mm 0mm 25mm 5mm}</style>'  //Your styles here, I needed the margins set up like this
                          + '</head><body><div>'
                          + data
                          + '</div></body></html>');

          $(mywindow.document).ready(function(){
            mywindow.print();
            setTimeout(function(){
              $('iframe#printf').remove();
            },
            2000);  //The iFrame is removed 2 seconds after print() is executed, which is enough for me, but you can play around with the value
          });
        }

        return true;
      }
    }
  };
});

    Dans votre modèle, vous marquez le bouton imprimer comme ceci:

    <a href="#" print-div=".css-selector-of-the-div-you-want-to-print">Print!</a>

    Et c'est tout, il devrait fonctionner.
    Le hackish, c'est que l'iFrame est supprimé après un certain nombre de millisecondes qu'il n'y a pas de croix-navigateur de façon à détecter la fin de l'impression de l'exécution, de sorte que vous guestimate combien de temps serait nécessaire pour qu'il fonctionne.

    Vous devrez peut-être inclure jQuery pour que ça fonctionne, je ne suis pas sûr que je n'ai presque jamais travailler sans elle. J'ai ajouté quelques commentaires en ligne pour rendre les choses plus claires. J'ai utilisé un code de cette réponse qui utilise une fenêtre pour imprimer div de contenu (mais à l'extérieur de Angular.js). Peut-être que vous aimerez cette approche plus.

  2. 5

    J'avais besoin de ce travail dans IE8+

    'use strict';
angular
.module('print-div', [])
.directive('printDiv', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var iframe;
var elementToPrint = document.querySelector(attrs.printDiv);
if (!window.frames["print-frame"]) {
var elm = document.createElement('iframe');
elm.setAttribute('id', 'print-frame');
elm.setAttribute('name', 'print-frame');
elm.setAttribute('style', 'display: none;');
document.body.appendChild(elm);
}
function write(value) {
var doc;
if (iframe.contentDocument) { //DOM
doc = iframe.contentDocument;
} else if (iframe.contentWindow) { //IE win
doc = iframe.contentWindow.document;
} else {
alert('Wonder what browser this is... ' + navigator.userAgent);
}
doc.write(value);
doc.close();
}
element.bind('click', function(event) {
iframe = document.getElementById('print-frame');
write(elementToPrint.innerHTML);
if (window.navigator.userAgent.indexOf ("MSIE") > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
}
};
});
  3. -1

    angularPrint angulaire de la directive qui est super facile à utiliser.
    https://github.com/samwiseduzer/angularPrint

    il vous suffit de décorer votre html avec ses attributs personnalisés:

    <div>
<div print-section>
I'll print
<p>Me, too!</p>
</div>
<div>I won't</div>
</div>