Using jQuery to Print a Web Part

8/3/2019 Using jQuery to Print a Web Part

http://slidepdf.com/reader/full/using-jquery-to-print-a-web-part 1/7

/01/12 Using jQuery to Print a Web Part

ekswithblogs.net/SoYouKnow//using-jquery-to-print-a-web-part.aspx

The SharePoint HillbillFewer Big Words... More Pretty Pictures...

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

Using jQuery to Print a Web Part

Someone drank the jQuery Kool-Aid…

Heres a super quick and simple blog post that you may or may not find useful… as always I offer a money back guarantee…

Lets say you want to print out your SharePoint page but you dont 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 cant 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:

PRINAREA

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 youwant 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.

Scenario 1: Printing out a specific Web Pa 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?

Lets 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.

posts - 114, comments - 747, trackbacks - 0

Switch to Elastic Layout





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

<script type="text/javascript" src="../scripts/jquery-1.4.1.min.js"</script

<script type="text/javascript" src="../scripts/PrintArea.js"</script

<SCRIPT type=text/javascript

function printPage(idOfWebPart){

var printElement = document.getElementById(idOfWebPart);

$(printElement).printArea({mode: "popup", popClose: false});

};

</SCRIPT

<input type=button value="Print Page" onclick="javascript:printPage('<ID of Web Part');"

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.. theres the right





way, and then theres the lazy way… Im going to do the lazy way, but Im 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 pages 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 WONT be pretty, but dont 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 dont 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):

<td class="" valign="top"

<div WebPartID="45a689ea-04bf-4c51-90bb-824823298e81" HasPers="false" id="WebPartWPQ4" width="100%" allowDelete="false"

<table border="0" width="100%" cellpadding="2" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http

<tr valign="top"

<th class="ms-vh" nowrapTitle</th<th class="ms-vh" nowrapHours</th

<th class="ms-vh" nowrapEntry Date</th

<th class="ms-vh" nowrapIssueID</th

<th class="ms-vh" nowrapTotal Hours</th

</tr

<tr class="ms-alternating"

<td class="ms-vb"Entry 1</td

<td class="ms-vb"4.00</td

<td class="ms-vb"12/14/2009 12:00 AM</td

<td class="ms-vb"1</td

<td class="ms-vb"</td

</tr

.

.

.

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 “WebParWPQ4 ”, again NOT “WebpartID”.

So, in the html above, we would modify our button to look as follows:

<input type=button value="Print Page" onclick="javascript:printPage(‘WebPartMPQ4’);"





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…

Scenario 2: Prining o Main Conen of Page

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_ConenTable ”

So, when I modify the button html above as follows we should be printing the main content area:

<input type=button value="Print Page" onclick="javascript:printPage(‘MSO_ContentTable’);"

Lets 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 wasnt so lazy, I dig into it deeper, but hey, I gotta give you guys something to do.. right?

Well.. thats 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!





Share This Post:

Thanks once more for stopping by, hope you picked up a trick or two

posted @ Wednesday, October 27, 2010 5:09 PM

Comments on this entr:

# re: Using jQuer to Print a Web Part

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 jQuer to Print a Web PartLeft 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!


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.






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.


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-a-

print-preview-bookmarklet/


Left by Mark at 10/28/2010 8:20 AM

Thanks guys, appreciate the help and feedback...


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...


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


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');





Title: re: Using jQuery to Print a Web Part

Name:

Email: (not displayed)

Website:

Comment:

Remember Me?

Comment Reset

Enter the code shown above

Live Comment Preview:

$(printElement).printArea({mode: 'popup', popClose: true});

});

"/>

</CustomAction>

</Elements>


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 comment:

Mark Rackley Theme by PiyoDesign. Valid XHTML & CSS.

Using jQuery to Print a Web Part

Documents

Transcript of Using jQuery to Print a Web Part