AngularJS Directive For Browser Printing
Posted By : Milind Ahuja | 28-Oct-2017
In this Blog, I am going to build a directive that allows you to print elements selectively.
So lets here is the directive first and then we will understant how it works:
(function (angular) {
'use strict';
function printDirective() {
var printSection = document.getElementById('printSection');
// if there is no printing section, create one
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
function link(scope, element, attrs) {
element.on('click', function () {
var elemToPrint = document.getElementById(attrs.printElementId);
if (elemToPrint) {
printElement(elemToPrint);
window.print();
}
});
window.onafterprint = function () {
// clean the print section before adding new content
printSection.innerHTML = '';
}
}
function printElement(elem) {
// clones the element you want to print
var domClone = elem.cloneNode(true);
printSection.appendChild(domClone);
}
return {
link: link,
restrict: 'A'
};
}
angular.module('app').directive('ngPrint', [printDirective]);
}(window.angular));
Firstly, we check if a section that we want to print, which has the ID printSection, is part of the DOM. If there is no printSection, we create it and append it to the body of the web page and that section will be used for attaching DOM elements that we want to print.
Then, the link function is created where we get arguments in form from elements and attributes. We bind the click event to the button which uses the printElement function and adds the element that you want to print. window.print function is used to enable printing.
Now let's come to the CSS part:
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
In the CSS, the printSection DIV will be hidden on screen. Also, at the time of printing, the print media query will display only the print section and everything else will be hidden.
And in the last, we use the directive code and CSS in the button. Just add ng-print directive and print-element-id attribute.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.