How to Print Specific HTML Content with Button Click

When seeking to print specific HTML content upon button click, it's crucial to avoid printing the entire webpage. Here's a comprehensive approach:

Leveraging Media Queries

Emphasizing the media query for print in CSS is a clean solution:

@media print {
  .noPrint {
    display: none;
  }
}

This hides elements with the "noPrint" class when printing.

Applying CSS Selectors

Designate the elements you want to print with specific CSS selectors, such as:

  print me


  no print

Implementing Button Click Event

Attach a click event to your button to initiate printing:

  Print Me

Benefits

This method effectively hides unrelevant elements during printing, preserving clarity and avoiding clutter. It also maintains the website's appearance for screen viewing, enhancing user experience.