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)? Dec 28, 2018 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, 2018 at 13:11

1 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 

Style Component

@media print {
    .THIS .hideInPrint {
        display: none !important;
  • Sorry, It worked. After fixing some minor issues(misspelled class name).
    – VDahiya
    Dec 28, 2018 at 13:33
  • But may Iknow what's wrong with my code?
    – VDahiya
    Dec 28, 2018 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. Dec 28, 2018 at 13:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .