05/01/12

Using jQuery to Print a Web Part

The SharePoint Hillbill

Fewer Big Words... More Pretty Pictures...

posts - 114, comments - 747, trackbacks - 0

Switch to Elastic Layout

<< Pescadigitation The Pinnacle of Collaboration? | Home | Being Lazy is Being Green >>

Using jQuery to Print a Web Part

Someone drank the jQuery Kool-Aid Here s a super quick and simple blog post that you may or may not find useful as always I offer a money back guarantee Let s say you want to print out your SharePoint page but you don t want the Search Box or anything outside the main content area to print, or maybe you just want one specific web part on the page to print; how would you do that? I spent about 5 minutes Googling it on Bing (I heard that phrase at SPTechCon last week really wish I could remember who told me, but I can t take credit for making it up) and found a simple jQuery library which fit my needs perfectly. There is a jQuery library called PrintArea, it can be found at: P R IN AR E A Using this library and only a few lines of code you can add a print button or link on any page and just print out the section of the page you want to. First thing you want to do is download the PrintArea.js file and upload it to a document library or deploy it to your file system like I have described in previous posts. Also, make sure you have access to the jQuery library as well. Again, I will just place these in a scripts document library for this example. Once you have that done, we are ready to go. Sce na rio 1 : P rinting out a sp e cific We b P a rt So, you went to all that trouble to create that pretty DVWP and you would like to give the user the ability to easily print out just that DVWP. What do you do? Let s say you have a DataViewWebPart like the Time List below and you want to print out JUST the time list.

First thing you need to do is add a Content Editor Web Part (CEWP) to the page.

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

1/7

05/01/12

Using jQuery to Print a Web Part

You then need to place the following script into the CEWP:

<cittp=tx/aacit sc".srpsjur-...i.s <srp srp ye"etjvsrp" r=./cit/qey141mnj" /cit <cittp=tx/aacit sc".srpsPitraj"<srp srp ye"etjvsrp" r=./cit/rnAe.s /cit <CITtp=etjvsrp SRP yetx/aacit fnto pitaeiOWbat{ ucin rnPg(dfePr) vrpitlmn =dcmn.eEeetydiOWbat; a rnEeet ouetgtlmnBI(dfePr) $pitlmn)pitra{oe "ou" ppls:fle) (rnEeet.rnAe(md: ppp, oCoe as}; } ; <SRP /CIT <nu tp=utnvle"rn Pg"ocik"aacitpitae'I o WbPr '; ipt yebto au=Pit ae nlc=jvsrp:rnPg(<D f e at )"

Essentially, all we are doing is putting a button on the page and taking the ID of our DataViewWebPart and passing it to the printPage function when someone clicks the button. The PrintArea library prints out whatever HTML exists in the WebPart and even opens up what we are printing in a new window. Of course you can take this ugly button and make it an image, link, or whatever else your precious heart desires Ahhh.. but first we need to know the id of the element that contains our DataViewWebPart? How do we do that? Well.. there s the right

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

2/7

05/01/12

Using jQuery to Print a Web Part

way, and then there s the lazy way I m going to do the lazy way, but I m sure there must be some better way.. again, feel free to enlighten us The lazy way is to view the page source and find our id in the page source (NOT the WebPartID). This ID should not change, but if you use the same DVWP on another page, it most likely will NOT have the same id. So.. to view the page s source, right click on the page and click on wait for it. View Source I know! right?

Now, when you are viewing the source it WON T be pretty, but don t panic we can do a simple text search to find what we are looking for I know from looking at my screen shot above, that the first entry in my DVWP is Entry 1, so why don t we do a quick search. When I do that search it takes me to the following line in the source (I broke it up so that it is easier to read):

<dcas" vlg=tp t ls=" ain"o" <i WbatD"569a0b-c19b-2839e1 Hses"as"i=WbatP4 wdh"0% alweee"as"sye dv ePrI=4a8e-4f45-0b842288" aPr=fle d"ePrWQ" it=10" loDlt=fle tl <al bre=0 wdh"0% clpdig""clsaig""xlsx"tp/www.r/01XLcea xlsd"tp/shm tbe odr"" it=10" eladn=2 elpcn=0 mn:=ht:/w.3og20/MShm" mn:=ht:/cea <rvlg=tp t ain"o" <hcas"sv"nwa Tte/h t ls=m-h orp il<t <hcas"sv"nwa Hus/h t ls=m-h orp or<t <hcas"sv"nwa EtyDt<t t ls=m-h orp nr ae/h <hcas"sv"nwa IseD/h t ls=m-h orp suI<t <hcas"sv"nwa TtlHus/h&bp t ls=m-h orp oa or<t ns; <t /r <rcas"satraig t ls=m-lentn" <dcas"sv"Ety1/d t ls=m-b nr <t <dcas"sv"40<t t ls=m-b .0/d <dcas"sv"1/420 1:0A<t t ls=m-b 21/09 20 M/d <dcas"sv"1/d t ls=m-b <t <dcas"sv"<t t ls=m-b /d <t /r . . .

As you see, the entire DVWP is inside the div: <div WebPartID="45a689ea-04bf-4c51-90bb-824823298e81" HasPers="false" id="WebPartWPQ4" width="100%" allowDelete="false" style="" > What we need is the id which in this instance is We b P a r WP Q4 , again NOT WebpartID. So, in the html above, we would modify our button to look as follows:

<nu tp=utnvle"rn Pg"ocik"aacitpitaeePrMQ; ipt yebto au=Pit ae nlc=jvsrp:rnPg(WbatP4)"

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

3/7

05/01/12

Using jQuery to Print a Web Part

Now, that we are passing in the id of our DVWP, we should be good to go. So, when we click the Print Page button I should get a pop up window with a preview of what you will be print as well as a print dialog box:

There you go! Nothing much to it Sce na rio 2 : P rin ing o Ma in Con e n of P a ge

So, what if you want to print all the content on the page except for the annoying search box and other artifacts that come across? Well, all you have to do for that is pass in the correct ID for the element that contains all the page content you want. Again, this can be done by viewing the source for the page. I can tell you that for a Out of the Box team site the ID appears to be MSO_Con e n T a b le So, when I modify the button html above as follows we should be printing the main content area:

<nu tp=utnvle"rn Pg"ocik"aacitpitaeS_otnTbe)" ipt yebto au=Pit ae nlc=jvsrp:rnPg(MOCnetal;

Let s click the button and see what happens:

As you can see, it only brings over the main content of the page (including the print button which you may find annoying). I have not done a lot of research to determine how global the id MSO_ContentTable is.. I suspect it works for all non-publishing sites (but that is just a guess). If I wasn t so lazy, I dig into it deeper, but hey, I gotta give you guys something to do.. right? Well.. that s all for now folks Not rocket science, and maybe you have come up with a better solution, luckily there is a comments section below so you can enlighten all of us!

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

4/7

05/01/12

Using jQuery to Print a Web Part

Thanks once more for stopping by, hope you picked up a trick or two Share This Post: posted @ Wednesday, October 27, 2010 5:09 PM

Comme nts on this e ntr : # re : Using j Que r to P rint a We b P a rt

Left by Marc D Anderson at 10/27/2010 6:39 PM You have *got* to start using a DOM inspector rather than View Source if you're going to play the jQuery game. Not only is View Source cumbersome, it only shows you the markup as it looked when the page first loaded. The script running in the page can (as you know) alter the DOM, so View Source may show you ancient history. M. # re : Using j Que r to P rint a We b P a rt

Left by spevilgenius at 10/27/2010 7:01 PM Nice post! May have to add that to the mix. How is the cross page printing if you have a lot of items? Just curious! # re : Using j Que r to P rint a We b P a rt

Left by Mark at 10/27/2010 7:18 PM Cross page printing is not too bad vertically, but sucks horizontally. I generally try to tweak the page so that it fits nicely... or of course play with the printer properties before I print.

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

5/7

05/01/12
# re : Using j Que r to P rint a We b P a rt

Using jQuery to Print a Web Part

Left by Hal Borland at 10/27/2010 7:49 PM Mark I always use firebug to view the DOM, but I don't think there is an IE version. I have also used Fiddler and Fiddler2 to do the same type of troubleshooting. # re : Using j Que r to P rint a We b P a rt

Left by Christophe at 10/28/2010 1:51 AM Mark, Firebug is THE tool for working with the DOM. To add to Marc's comment, this is actually not enough, as the layout may vary across browsers. IE 8 has a developer tool for that (I only use Firebug, but I know it's bad!). Now my usual diatribe: I am not sure jQuery helps much here, and you should be able to find similar tools written in plain JavaScript. Just for the record, I wrote a bookmarklet for Web Part printing (not as fancy as your solution): http://blog.pathtosharepoint.com/2010/09/27/for-all-sharepoint-end-users-aprint-preview-bookmarklet/ # re : Using j Que r to P rint a We b P a rt

Left by Mark at 10/28/2010 8:20 AM Thanks guys, appreciate the help and feedback...

# re : Using j Que r

to P rint a We b P a rt

Left by VJ at 11/8/2010 8:42 PM Can there be another incrementing column based on issue id? Like, for all issue id=1, the second column would be 1,2,3 so on... # re : Using j Que r to P rint a We b P a rt

Left by FaulstiR at 11/12/2010 12:50 PM You could use CSS "media" functionality to hide your print buttons when sending it to the printer. http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html # re : Using j Que r to P rint a We b P a rt

Left by russell at 5/24/2011 1:42 PM This works great, thanks! I created a custom action that adds a Print button to every listview on my site. Now all views on all my lists and libraries have the print function! Thanks again. <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="GeraldPrintListViewCustomAction" RegistrationType="List" RegistrationId="101" Location="ViewToolbar" Sequence="1000" Title="Print"> <UrlAction Url="javascript: $.getScript('/_layouts/GeraldPrintListViewCustomAction/jQuery.PrintArea.js', function() var printElement = document.getElementById('ctl00_MSO_ContentDiv');

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

6/7

05/01/12

Using jQuery to Print a Web Part

$(printElement).printArea({mode: 'popup', popClose: true}); }); "/> </CustomAction> </Elements> # re : Using j Que r to P rint a We b P a rt

Left by rahul dayal at 8/12/2011 6:32 AM sir good work i have just used it and it is very great.. great work.. i am new to sharepoint using this i had just completed my work thank you for your support

Your comme nt: Title: Name: Email: Website: Comment: (not displayed) re: Using jQuery to Print a Web Part

Remember Me?

Enter the code shown above Comment Reset

Live Comme nt P re vie w:

Mark Rackley

Theme by PiyoDesign. Valid XHTML & CSS.

geekswithblogs.net/SoYouKnow/

/using-jquery-to-print-a-web-part.aspx

7/7