Using SLDS to avoid printing specific elements on the LWC Component

There might be an ask from the business that only certain parts of the page have to be printed and avoid other elements from getting printed when we save the file as PDF or when taking a printout.

How can we handle this use case?

Well, we can use some custom styles but isn't it a best practice to use out-of-the-box features first before we reach out to custom solutions?

That's what we will be doing in this post.

Let me walk you through how to use SLDS specific classes to avoid a few elements from getting printed (or saved as PDF).

Wrap the element that you wish to avoid from getting printed (or saved) using the class slds-no-print

Here is what the complete template file is going to look like.

<template>
  <div>
    <span>
      <p>HEY!! Salesforce Casts</p>
    </span>
  </div>
  <p class="slds-no-print">This will not be printed (or saved)</p>
</template>

In case you want the complete web page to be downloaded as a PDF then you can check this out.

Hope this helps!