Search code examples
javascriptangularjsnode.jsexpressangularjs-routing

SPA unresponsive after printing <div>

I'm building a small site for a client, as part of the application, I need to be able to print the contents of a div. With the help of another question on here I came up with a small function in the controller to display only the div in question, bring up the print dialog, and then return back to the original page.

self.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
   }

The problem I'm having is that after returning to the page, it becomes unresponsive. Clicking links and buttons outputs to the console (both in browser and my server terminal) as if it was still working, but nothing visibly changes.

I tried opening it in a new window, but short of writing a new html, controller, service, route and on up I don't see how to make it work that way either. I tried $location in a few places too, but that didn't help either. Any ideas?

Solution

  • The better, faster, easier way is to use an @media print query.

    I hadn't found any really good instructions until I came across this blog post https://joshuawinn.com/css-print-media-query/ .

    In essence, you add a class to all of the tags that you don't want to print ( in my example I used class='noPrint' ), then the following into your stylesheet.

    @media print { 
  .noPrint { display: none !important; } 
 }

    FAR easier than my first attempt from above.