CODEWITHSUNDEEP
asp.net-mvc
A Bogus
A Bogus

Reputation: 3930

How do I print only part of a web page?

I have a Partial view in a JQuery dialog box that has button links on the side, and text links at the top, and a grid underneath.

I would like to have one of the links at the top be a "Print" link, that prints out the grid an nothing else.

JavaScript's window.print() prints the entire page. How can I print just the grid? Is there someway to tell a print method to "Just print the contents of this div"?

If I need to create a separate "Printable grid" page, how do I avoid printing the "print button" that I assume needs to be on the page?

Thanks!

Upvotes: 2

Views: 1269

Answers (2)

lucuma
lucuma

Reputation: 18339

This really depends entirely on your implementation but I find the easiest way to achieve this is to include a print specific style sheet like this:

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

That stylesheet would hide everything but the table and would require nothing special besides addressing which elements to show and hide.

After further consideration, you could also do the following:

Create a separate page that only includes the partial that has the grid. And when the user clicks the print button, you open the new window and window.print() on load.

Upvotes: 2

Jason Berkan
Jason Berkan

Reputation: 8884

The canonical way to avoid printing anything is to add a print stylesheet that sets elements that should not print to display: none.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Inside print.css, you can redefine existing CSS styles to display: none and you can add a .DoNotPrint class that you can apply to anything that you don't want to print.

.DoNotPrint
{
    display: none;
}

Upvotes: 2

Related Questions