How to Print HTML Content on click of a Button, but Not the Page?

When a user clicks a button, HTML permits them to add data to a container and print some HTML content. As a result, the browser’s print dialogue opens, but the webpage content is not printed. However, this operation prints some other HTML text that is not visible on the page.

This post will demonstrate about printing the HTML content with the click of a button but not the page.

How to Print Content of HTML by Clicking a Button?

The CSS “@media” rule is utilized for applying a section of a style sheet based on the outcomes of one or more media queries. Users can provide a media query if and only if it satisfies the device utilized to view the content.

To print the HTML content with a click of a button, try the instructions below.

Step 1: Insert First Heading

First of all, add the first heading with the help of the heading tag from “<h1>” to the “<h6>” tag, where the <h1> tag is utilized for the most important heading.

Step 2: Add Second Heading

Next, add a second heading using the “<h2>” tag.

Step 3: Create Button

After that, create a button by utilizing the “<input>” element. Then, add the following attributes inside:

“type” attribute allocates the input type. For instance, the “button” type is utilized to create a button.
Next, the “value” attribute is utilized for specifying the value for an input element. This attribute can be used in many ways for various input types.
The user can utilize the “Onclick” attribute to perform an event on an HTML element.
“class” specifies one or more classes for an element. The class attribute is mostly used to point to a class in a style sheet:

<h1>

Linuxhint Content Creators (Print This)

</h1>

<h2 class="noprint">

TSL Content Creators (No Print)

</h2>

<input type="button" value ="Print" onclick="window.print();" class="noprint" />

As a result, a button is created that can be utilized for printing the HTML content on the click of a button.

How to Print HTML Content on click of a Button, But Not the Page?

To print the HTML content with the click of a button without printing the whole page, look at the given instructions.

Step 1: Utilize the “@media” Rule

Now, utilize the “@media” rule to print the specific content of the div without printing the whole page. To do so, access the div class using the “.noPrint” selector.

Step 2: Access Class Attribute

@media print {

.noprint{

display:none;

}

}

h1{

color:rgba(50, 9, 233, 0.4);

}

Access the class attribute by utilizing the value of the class and apply the “display” property of CSS with the value “none”. Then, apply the “color” property to the heading the user wants to print.

Output

It can be observed that when the button is clicked, the added HTML content is ready to print.

Conclusion

To print the content of HTML by clicking on a button, but not the page, first, create two headings. Then, create a button by utilizing the “<input>” element and add the attributes, including “type”, “onclick”, and “class”. Next, use the “window.print()” as an “onclick” value. After that, utilize the “@media.print” rule and access the class value for printing the HTML content at the click of a button. This post demonstrated the method for printing the content on the click of a button.