1,804 articles and 15,030 comments as of Monday, May 30th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

Tuesday, December 9, 2008

JQuery for Everyone: Print (Any) Web Part

Comments: 62

Back in August, I worked on a script to print web parts to answer a question from Stump the Panel. However, my script was not dynamic enough to adjust to the web parts on the page and create the “print this” links on the fly–I had no good ideas to tackle that problem.

The more I explore jQuery, the more ideas I get about solving old problems. So when someone else asked for a printing solution, I decided to tackle it in jQuery.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load jQuery
  google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">
$(function(){
    //find all web parts by their TD
    var tags = $("td[id^='MSOZoneCell_WebPart']");
    //loop through web parts
    tags.each(function(){
        //get id for print function
        var tagid = $(this).attr("id");
        //append an image with onClick event
        $(this).find("h3 nobr").append(
            "<span style='padding-left:20px;'>"+
            "  <a href='#' onClick='printWebPart("+'"'+tagid+'"'+"); return false;'>"+
            "      <img src='/_layouts/images/nws16.gif' border='0' alt='printer friendly' />"+
            "  </a>"+
            "</span>"
        );
    });
});
function printWebPart(tagid){
    if (tagid) {
        //build html for print page
        var html = "<HTML>\n<HEAD>\n"+
            $("head").html()+
            "\n</HEAD>\n<BODY>\n"+
            $("#"+tagid).html()+
            "\n</BODY>\n</HTML>";
        //open new window
        var printWP = window.open("","printWebPart");
        printWP.document.open();
        //insert content
        printWP.document.write(html);
        printWP.document.close();
        //open print dialog
        printWP.print();
    }
}
</script>

Update 12/11/2008:
Dave T requested a version of this script that works with the List View Web Part (no title displays). Great idea Dave! Replace the main function with this one, notice there is a second “append” process that looks for the toolbar space instead of the title area.

$(function(){
    //find all web parts by their TD
    var tags = $("td[id^='MSOZoneCell_WebPart']");
    //loop through web parts
    tags.each(function(){
        //get id for print function
        var tagid = $(this).attr("id");
        //append an image with onClick event
        $(this).find("h3 nobr").append(
            "<span style='padding-left:20px;'>"+
            "  <a href='#' onClick='printWebPart("+'"'+tagid+'"'+"); return false;'>"+
            "      <img src='/_layouts/images/nws16.gif' border='0' alt='printer friendly' />"+
            "  </a>"+
            "</span>");
        $(this).find("td.ms-toolbar[width='99%']").append(
            "<span style='padding-left:20px;'>"+
            "  <a href='#' onClick='printWebPart("+'"'+tagid+'"'+"); return false;'>"+
            "      <img src='/_layouts/images/printerfriendly.gif' border='0' alt='printer friendly' />"+
            "  </a>"+
            "</span>");
    });
});

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Tuesday, December 9, 2008 at 9:00 am
Filed under Tips and Tricks · Tagged with

Please Join the Discussion

62 Responses to “JQuery for Everyone: Print (Any) Web Part”

Jay says:

March 24, 2010 at 12:06 pm

Is there any way to set the print properties using jquery? I need to print a specific table in landscape so I capture all the data I need to display and would like to have it so my end users don’t have to change their print settings each time they try and print the list.

Awesome job, thanks for sharing!!

Reply
Joe says:

March 29, 2010 at 9:37 pm

I was able to remove Print Icon and Title by including css media style inline to my theme css file.

@media print {
.ms-WPHeader TD {display:none;}
}

This with a DVWP I now have report printing without sql reporting services,

Thanks so much…

Reply
William Kreuder says:

June 22, 2010 at 4:47 pm

I am attempting to use your code to add a print icon on a web part that is a list view. I entered in the code via the content editor. In edit mode, I can see the print icon. However when I exit from edit mode, the icon dissapears. I think i need to link to the web part id? If so how do I find the web part id in SharePoint? Thanks! Bill

Reply
- ld davis says:
  
  August 4, 2010 at 4:08 pm
  
  Hi I am also having this problem. I see it when I am in edit mode, but when I exit out of there it disappears. Please help. This would be awesome to use. Thanks. LD Davis
  
  Reply
Frank says:

August 12, 2010 at 10:51 am

We are using MOSS and would like to be able to use ‘Print (Any) Web Part’ and ‘LoadTip Live on the same calendar. So far ‘No Luck’, is this possible? On the calendar(s) have requests for Color, Weekdays only, LoadTip Live and Print Any Web Part. We are using the calendars as our Hospital ‘Training Calendar’ and for the 12 ‘Conference’ Rooms. The calendars get posted on the door of each conference room.
Thanks,
Frank

Reply
Eric says:

October 19, 2010 at 11:10 am

Can you link to the older code with the hard-coded reference to the specific WebPart to be printed?
Thanks.

Reply
Tamms says:

May 26, 2011 at 1:42 am

Thanks for this….

We get a print icon (page pic) on every line on the form, is this what we would expect to? This icon also prints out on the printed page.

Thanks Tamms

Reply