Hide div from page layout after print button click

Question

In my lightning component, I have a div with aura:id = "hidefromPDF". On Print button click I want to hide the div from page print. I tried the following code on button click

{
   var hidefromPDF = component.find('hidefromPDF');
   $A.util.addClass(hidefromPDF,'slds-hide');
   window.print();
   $A.util.removeClass(hidefromPDF,'slds-hide');
}

But it's not hiding the div from the page print. Do I missing something here?

Answer 1

I think there is a lag between updating the DOM and sending the elements to the window.print. I would suggest, using another approach where you can hide the element/div which you don't want to print using a media query.

Example -

Give a specific class to that div

<div class="hideInPrint">
   ...content which you don't want to send to the print 
</div>

Style Component

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