I have a SharePoint Site that look something like the following:

enter image description here

Is it possible to tell SharePoint that I want to print the following out to a printer by inserting some javascript or some code on the SharePoint site? (Or alternative - to display the following in a new window screen?)

enter image description here


You could certainly use a custom CSS file targeted to print media that will exclude all the items you don't want it to.

Here's a tutorial on print friendly css - http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

  • James, that was a fast response. However, probably, I might have made my question quite unclear. Actually, I want to a feature such that the user, when it click on the print button of the Internet browser, the printer only print the 2nd screen shot. It will not print out everything as shown in the 1st screen shot. Also, I want only certain parts of the site to be printed by the printer and not all. From a quick scan of the tutorial, it seems to remove some formatting of the page. (Probably I still trying to learn this new tactics... would appreciate if there are more easier tutorials. Thanks) – Jack Jan 27 '12 at 8:09
  • Essentially, you want the CSS to remove the left hand navigation at the top links bar. This is fairly straight forward to do. As for a button for click to print - you could use a HTML Form web part to display a button, and have it's onclick attribute set to "javascript:window.print()". When the page is sent to the printer, the browser will load the print-media specific CSS file and use that. – James Love Jan 27 '12 at 8:14
  • @Dandroid Do you have a beginner tutorial for this feature that include examples on how to do it? Yes, I know that you and James are trying hard to guide me and advise me on how to proceed but I need a beginner tutorial as I am totally clueless on how can CSS can help me to hide elements such as <script type="text/javascript"> ... document.write('<tr>'); ... </script> – Jack Jan 27 '12 at 8:44
  • @Jack, I'm not sure how you got from using CSS to hide elements to document.write('<tr>');. This is a script-free solution, you shouldn't need any JavaScript to accomplish this (unless you need a custom Print button as James mentioned in comment 2. – webdes03 Apr 29 '12 at 14:02

James is correct, that you can use a print targeted CSS to accomplish what you want. Basically you create a CSS file and link it with the print media attribute, no need for any custom script. That CSS file will then be used by the browser/spooler when processing the page for print. This allows you to override any of the default CSS, font sizes, hide/show elements, re-position elements, etc. for your print view. The link that James posted is a good one, and I also have a blog post on the topic with a link to some of the other capabilities (which may be useful).

What you're doing is really just hiding the header, navigation, and quick launch. That can be done fairly easily with just CSS, although it's much easier in 2010 than it is in 2007 due to the heavy reliance on tables in 2007.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.