Hi! Is there a way to add a print screen button to my app?
Thanks!
Hi, Molly!
Thank you for your question. Yes, we can add a print screen button but this will required some custom code.
So we should start with adding button component to the page you want to be printed. No need to specify link action for this button.
Add a custom class to the button, so we could attach a click event:
Add this JS to the screen JavaScript section:
//use here your print button class name instead of '.print'
$(document).on('click', '.print', function(e){
e.preventDefault();
window.print();
});
//this code is adding a specific class to the body when the printing is started
// and removes it when it's over (no matter if user clicked Cancel or Print button)
(function () {
var beforePrint = function () {
$('body').addClass('printing');
};
var afterPrint = function () {
$('body').removeClass('printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
And now we need to add some CSS if we don’t want to print all the component on the page
Add this code to the screen CSS section:
.printing{
.not-print{
display: none !important;
}
}
‘printing’ class will be added to the body when your print button is clicked. Each screen component with class ‘not-print’ will be hidden. So all we need to do now is to add ‘not-print’ class to all component we don’t want to be printed.
Let’s say I have a text component I want to hide and also I don’t want to see the print button itself:
So this is how my screen looks before clicking Print button:
And this is what I see when the button is clicked:
