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');

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

  • 2
    Did you see what is it giving when you console.log(hidefromPDF)? – Naval Sharma Dec 28 '18 at 12:10
  • console log gives : {get: ƒ, getEvent: ƒ, superRender: ƒ, superAfterRender: ƒ, superRerender: ƒ, …}. However, If I comment $A.util.removeClass() code and return to the page that particular div not visible there. – VDahiya Dec 28 '18 at 13:11

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 

Style Component

@media print {
    .THIS .hideInPrint {
        display: none !important;
| improve this answer | |
  • Sorry, It worked. After fixing some minor issues(misspelled class name). – VDahiya Dec 28 '18 at 13:33
  • But may Iknow what's wrong with my code? – VDahiya Dec 28 '18 at 13:34
  • I think while showing/hiding the element using the toggle, it's not reflecting immediately on the DOM and that could be an issue. It's just an assumption which I am making. In the solution I provided, we have set explicitly that this element should not be visible when a print is performed. Eventually, we get rid of the toggling class and that's why it worked. – Naval Sharma Dec 28 '18 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.