Canvas Print Indicator

Background

Bootstrap library has the CSS Print Media classes for helping out with the HTML side when printing. However, there can be instances where you would want to trigger additional logics such as JS. So how can you go about this?

Approach

Within Canvas and client scripts, there is a variable/flag that you can check to detect whether it is printing the current page. This is attached to the $rootScope variable and can be accessed as a property named isPrinting.

Simple case in HTML,

<span ng-if="$root.isPrinting">Printed</span>

Or in JS,

if($rootScope.isPrinting){
   // do something
}
3 Likes