Creating a Print Button for your SharePoint Site 1

Scott ZischerkI recently had a client that wanted to print a page on their SharePoint 2010 site without the top ribbon.  This was easy enough to do, I suggested using the @media tag and showed them how it worked.  They said that was great, but sometimes they still wanted to print the ribbon.  So I suggested using some JavaScript in conjunction with the @media tag to accomplish this.

Create the CSS

Using the @media tag, I created a css file and called it print.css.  The file looks like this:

@media only print
{        
    #s4-ribbonrow
    {
        display:none;
    }

    #s4-titlerow
    {
        display:none;
    }

    #s4-leftpanel
    {
        display:none;
    }
    
    .s4-ca
    {
    margin-left:0px;
    }
    
    .s4-title
    {
        display:none;
    }
}

This, by itself, if you add a link to it on the master page or an individual page it will change the print out from this:

image

to this:

image

Add the JavaScript to Load the CSS

Now we’ll add some JavaScript and a print link to the master page to dynamically load the print.css file, trigger the print dialog, and unload the print.css file so it doesn’t interfere with printing with the browser print button.

function printWithoutChrome()
{
    var filename = "/Style Library/Print.css";
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
    //Add the css file to the head tag
    document.getElementsByTagName("head")[0].appendChild(fileref);
    
    //Open the print dialog
    window.print();
    
    //Remove the css file from the head tag.
    fileref.parentNode.removeChild(fileref);
}

So now when you print using the browsers print button, the page prints with the ribbon bar.  When you use our new print link to print, it prints without the ribbon.  I added a simple anchor tag that calls our JavaScript function to trigger the print.

<a href="javascript:printWithoutChrome();">Print</a>

As a side note, using different CSS selectors within the @media tag, you can alter colors, margins, widths and heights for the print out.

One comment

  1. The ‘Media Web Part’ is not available on Foundation. I want to be able to add a Print button so lists can be printed without side bar or ribbon.

    Any suggestions on how this can be done.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s