In a world full of fancy shining jQuery plugins one can’t simply print.

Often you’ll be using a grid JavaScript plugin or another heavy visualization component. One of the pitfalls you might experience with those components is that they don’t look nice when you try to print them. Sometimes this can’t be solved by with the dark side of the force a.k.a pure CSS.

So, what are our options?

From my experience with printing such JavaScript driven content, the best way is to keep 2 copies of the component. One for @media screen and one for printing.

What happens if the component shows large amount of data (thousands of rows, dynamically sizing content, etc “cool” stuff)? Wouldn’t it be a bad idea to update 2 versions of the same thing twice? In short, welcome to the world of pain and browser crashes.

Well, there is a solution to our troubles. We can update the second copy we keep for printing only when the user clicks the print browser button or you invoked $window.print() from your JavaScript code.

As you’ve probably guessed from the title, here comes a handy AngularJS directive we use at DConsult. It allows you to execute an Angular expression just before the printing. It also invokes a $digest phase so that your changes will be there for the printing.

Usage is quite simple as you might expect from AngularJS.

<div on-before-print="myCtrl.onBeforePrint()">content..</div>

<div ng-class="{printed: isPrinted}" on-before-print="printed = true">content...</div>

You can pass an expression or a call to function in the $scope.

Note: There will be only one digest phase before the browser open the print preview window.