Thursday, January 17, 2008

Printing SharePoint Web Part

Ever thought of printing a content of web part rather than complete page in sharepoint ?

Follow the Steps:

  • Create Print Button : Add content Editor web part to your page and paste the following script as Source Text


<>
< type="button" onclick="javascript:void(PrintWebPart())" value="Print Web Part">

< language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "WebPartWPQ6";

//Function to print Web Part

function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window var PrintingHTML = '\n\n';
//Take data from Head Tag if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n\n\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{ bolWebPartFound = false; alert ('Cannot Find Web Part'); } } PrintingHTML += '\n\n'; //Open new window to print if (bolWebPartFound)
{
var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar"); PrintingWindow.document.open(); PrintingWindow.document.write(PrintingHTML); // Open Print Window PrintingWindow.print(); }}< /script>

  • In order to print content from web part you need to connect the desired web part to the print button
  • Get the Div Id of web part from the Page Source and assign it to the variable in Button

Well you would like to check this for simpler explanation :

http://www.imakenews.com/mernstmann/e_article000435389.cfm

9 comments:

Lisa M. said...

You can achieve this out of box using Printing Services for SharePoint... Saw the demo the other day from http://www.sharepointprinting.com

Best,
Lisa

praveen said...

can we have settings also be specified like
1. default will be landscape
2. print every page with column headers if it is list

Zach said...

Missed a line of code...

You need to add: PrintingWindow.document.close();
to get it to work right.

Like this:
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
PrintingWindow.document.close();

// Open Print Window
PrintingWindow.print();

I needed to print a webpart and have the popup window close after printing so I shrunk it & moved it to the bottom right of the screen like this:

var PrintingWindow = window.open("","PrintWebPart", "width=2,height=2,toolbar=no,directories=no,status=nomenubar=no,scrollbars=no,resizable=no");
PrintingWindow.moveTo(900,900);

Then, to make the popup auto close after printing add PrintingWindow.close(); to the bottom of the function like this:

// Open Print Window
PrintingWindow.print();
PrintingWindow.close();

Sonia Aguayo Rojas said...

I tried the code with a Wiki SHarePoint page but i cannot find the WebID part.It worked great for other types of WebPart shuch as calendars, contacts.

Do you know other way to print wikis in MOSS 2007?
Thank you,
Sonia

Anonymous said...

I know this is an older blog but I really want to get the code to work with a List View web part. I've created a button with SharePoint Designer and added a CEWP. I cannot seem to find the "div id" for the webpart. I've found a webpartid which is a GUID. Is this the same thing? Is this also the same thing you add into the value of the Button?

adriana said...

I know this is a very late comment but still I am going to post this anyway, I have a Data View Web Part that contains Photos too but the photos are not printed, any idea what else should I add? Thanks
P.S. Other than the photo issue this works great- thanks for the post!

Anonymous said...

Did anyone find answers for above posts? I'm trying this code for listview web part, but not able to figure out which id should i use.
Any help?

Anonymous said...

you can go throw this link too its very clear :http://hi.baidu.com/mzcbjk/blog/item/ddcbe75024f9a5581138c240.html

Anonymous said...

Great tutorial, thanks! I just have a question. How can I hide the "Print this Page", s it doesn't come up when printing?

thanks!