Print a div using javascript in angularJS single page application

Question

I have a single page web application using angularJS  I need to print a div of certain page  I tried the following   The page contains few div  print html    lt div gt     lt div gt      Do not print    lt  div gt     lt div id  printable  gt      Print this div    lt  div gt     lt button ng-click  printDiv  printableArea     gt Print Div lt  button gt   lt  div gt    The controller has following script    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      This code prints the desired div but there is a problem   the statement document body innerHTML   originalContents  replaces the body of the whole application since it is a SPA  So when I refresh the page or click on print button again  the whole content of the page is erased

User · Answer

You can now use the library called angular-print

User · Answer

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   lt html gt  lt head gt  lt link rel  stylesheet  type  text css  href  style css    gt  lt  head gt  lt body onload  window print    gt     printContents     lt  body gt  lt  html gt       popupWin document close

User · Answer

I done this way    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   lt  doctype html gt  lt html gt     docHead     lt body onLoad  window print    gt     printContents     lt  body gt  lt  html gt       writeDoc close      newWin focus

User · Answer

This is what worked for me in Chrome and Firefox  This will open the little print window and close it automatically once you ve clicked print   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   lt  DOCTYPE html gt  lt html gt  lt head gt  lt title gt TITLE OF THE PRINT OUT lt  title gt                                           lt link rel  stylesheet  type  text css  href  app directory file css    gt                                           lt  head gt  lt body onload  window print    window close     gt  lt div gt                                          printContents     lt  div gt  lt  html gt                 popupWin document close

User · Answer

Two conditional functions are needed  one for Google Chrome  and a second for the remaining browsers    scope printDiv   function  divName         var printContents   document getElementById divName  innerHTML        if  navigator userAgent toLowerCase   indexOf  chrome    gt  -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   lt  DOCTYPE html gt  lt html gt  lt head gt                   lt link rel  stylesheet  type  text css  href  style css    gt                   lt  head gt  lt body onload  window print    gt  lt div class  reward-body  gt     printContents     lt  div gt  lt  body gt  lt  html gt             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   lt html gt  lt head gt  lt link rel  stylesheet  type  text css  href  style css    gt  lt  head gt  lt body onload  window print    gt     printContents     lt  body gt  lt  html gt             popupWin document close              popupWin document close         return true

User · Answer

I don t think there s any need of writing this much big codes   I ve just installed angular-print bower package and all is set to go   Just inject it in module and you re all set to go Use pre-built print directives  amp  fun is that you can also hide some div if you don t want to print  http   angular-js in angularprint   Mine is working awesome

User · Answer

Okay i might have some even different approach   I am aware that it won t suit everybody but nontheless someone might find it useful   For those who do not want to pupup a new window  and like me  are concerned about css styles this is what i came up with   I wrapped view of my app into additional container  which is being hidden when printing and there is additional container for what needs to be printed which is shown when is printing   Below working example    x000D   x000D  var app   angular module  myApp        x000D   app controller  myCtrl   function  scope    x000D     x000D       scope people      x000D         id     000   x000D         name     alfred  x000D         x000D        x000D         id     020   x000D         name     robert  x000D         x000D        x000D         id     200   x000D         name     me  x000D          x000D   x000D       scope isPrinting   false  x000D     scope printElement       x000D     x000D     scope printDiv   function e  x000D      x000D     console log e   x000D      scope printElement   e  x000D      x000D      scope isPrinting   true  x000D         x000D          does not seem to work without toimeouts x000D     setTimeout function    x000D      window print    x000D       50   x000D      x000D     setTimeout function    x000D       scope isPrinting   false  x000D       50   x000D      x000D      x000D       x000D       x000D        x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  myApp  ng-controller  myCtrl  gt  x000D   x000D    lt div ng-show  isPrinting  gt  x000D     lt p gt Print me id    printElement id   lt  p gt  x000D       lt p gt Print me name    printElement name   lt  p gt  x000D    lt  div gt  x000D    x000D    lt div ng-hide  isPrinting  gt  x000D       lt  -- your actual application code -- gt  x000D       lt div ng-repeat  person in people  gt  x000D         lt div ng-click  printDiv person   gt Print   person name   lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     x000D     x000D   lt  div gt  x000D    x000D   x000D   x000D    Note that i am aware that this is not an elegant solution  and it has several drawbacks  but it has some ups as well    does not need a popup window keeps the css intact does not store your whole page into a var  for whatever reason you don t want to do it    Well  whoever you are reading this  have a nice day and keep coding     EDIT   If it suits your situation you can actually use    media print     noprint    display  none       media screen    noscreen   visibility  hidden  position  absolute        instead of angular booleans to select your printing and non printing content  EDIT   Changed the screen css because it appears that display none breaks printiing when printing first time after a page load refresh   visibility hidden approach seem to be working so far

[javascript] Print a div using javascript in angularJS single page application

Examples related to javascript

Examples related to angularjs

Examples related to html

Examples related to printing

Examples related to single-page-application