How to Print Specific HTML Content Without Affecting the Page\'s Display?

Printing Specific HTML Content without Affecting Page Display

In web development, you may encounter a scenario where you need to print specific HTML content when a button is clicked, without disrupting the page's current display. Various solutions exist, including the one you mentioned: placing the content in a hidden div.

However, a more efficient approach can be achieved using CSS media queries:

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

Here, a class called "noPrint" is applied to elements that should not be printed. When the print dialog opens, the styles defined within the @media print block will be applied, hiding these elements while maintaining the original appearance of the webpage.

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

In this code, the "print me" heading will be printed, while elements with the "noPrint" class will be hidden. This method allows for greater flexibility and control over the print output, ensuring that only the intended content is sent to the printer.

The above is the detailed content of How to Print Specific HTML Content Without Affecting the Page\'s Display?. For more information, please follow other related articles on the PHP Chinese website!