Home
Our Work
Services
Small Business Intranet
Samples
Training
SharePoint
Hosting
    

dbWeb > Blogs > Brandt Fuchs > Posts > Printer Friendly Pages

Printer Friendly Pages
I often hear, 'can I get a printer friendly display of the data within sharepoint?'  I've seen a feature around that add a menu button to list toolbars - here.  I went down another route to accomplish this, and I'll admit it's not the most elegant solution as it could be packaged into a feature.  It does however allow users to print the content on any page attached to the master page rather than just lists with a toolbar.
 
This will allow you, from any page that is attached to the master page, to hide all but the main content area so that you can print a page without the extra content using up all the ink in your printer. Of course this is not as elegant as a feature that would deploy across all sites, but it works and if some body wants to wrap it up into a feature, go right ahead.
 
Insert the following divs onto the masterpage, wherever you would like to see the buttons to change views from a non printer-friendly view to a printer-friendly view.
  
<div id="printbutton"><asp:Button CssClass="ms-vb" runat="server" UseSubmitBehavior="false" OnClientClick="javascript:PrinterFriendly();return false;" Text="Print-Friendly" id="Button1" CausesValidation="False" EnableViewState="False" /></div>
 

<div id="nonprintbutton" style="display:none"><asp:Button CssClass="ms-vb" runat="server" UseSubmitBehavior="false" OnClientClick="javascript:NonPrinterFriendly();return false;" Text="Non Print-Friendly" id="Button2" CausesValidation="False" EnableViewState="False" /></div>

Insert the following javascript in the head tag of the masterpage. (replace content this color with the IDs of the elements you want to hide/show)
 

<script type="text/javascript" language="javascript">

function PrinterFriendly(){

                document.getElementById('id of area you want to hide').style.display="none";

                document.getElementById('id of area you want to hide').style.display="none";

                document.getElementById('id of area you want to hide').style.display="none";

                document.getElementById('id of body or outermost element to fit within a page width').style.width="7.5in";

                document.getElementById('nonprintbutton').style.display="";

                document.getElementById('printbutton').style.display="none";

}

function NonPrinterFriendly(){

                document.getElementById('id of area you want to show').style.display="";

                document.getElementById('id of area you want to show').style.display="";

                document.getElementById('id of area you want to show').style.display="";

                document.getElementById('id of body or outermost element to be fullscreen').style.width="100%";

                document.getElementById('printbutton').style.display="";

                document.getElementById('nonprintbutton').style.display="none";

}

</script>

You will have to go through the master page and add a few IDs to the areas that you want to hide/show so that you can reference these areas with the above javascript. You could use this code to hide and show any part of the site that you might want to print.

Comments

There are no comments yet for this post.