Sign in to follow this  
plywood

[web] Printing from browsers

Recommended Posts

plywood    103
Hi, There are certain pages on my site that contain graphs and other tabular data that I would like to provide a "Print" button for; that, when clicked, launched the user's default print dialog and allows the user to print that page... However, I want to be able to only specify the graph or tables as part of the print. In fact, through this Print button, I don't want the user to be able (!) to print any other components of the page, including the traditional print headers and footers that most browsers insert automatically, such as showing the URL of the page being printed, page numbers, etc. Is this even possible? How can I basically declare certain sections/divs/etc. of my page printable and only allow those items to be printed through this custom Print button? No headers or footers. No requirement that the user first highlight the graph or table and then print "selected highlighted" in the print dialog... ? Thanks for any feedback! plywood

Share this post


Link to post
Share on other sites
benryves    1999
Using regular HTML you are a little limited. You can use media="print" with stylesheets to include a stylesheet that is only used when printing, for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Printing CSS</title>
<style type="text/css" media="print">
.not-printed {
display: none;
}
</style>
</head>
<body>
<p>This is printed.</p>
<p class="not-printed">This isn't.</p>
</body>
</html>

You will, however, not be able to remove the default browser information that is added to the page. For more control you will either have to head to server-side solutions (e.g. generate a PDF on the server and send that to the user to print off themselves) or rich client-side solutions (such as Flash or Silverlight).

Share this post


Link to post
Share on other sites
leiavoia    960
In addition to class="NotPrinted", you can also just restyle entire sections of the page inside your print-specific CSS. If you were wise enough to insert the header/footer in their own DIVs, you can just redeclare those sections as invisible, along with any other features that you don't want printed, or printed differently:

#header, #footer, .noprint { display: none; }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this