Monday, July 13, 2009

WebPart Printing

3 Easy Steps to Print your WebPart

  1. Add Content Editor WebPart on your WebPart page in which you want to Print.
  2. Click on Modify Share WebPart then click Source Editor's button and add below code for Print Button.

    < 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 Printing
    Window.print();
    }
    }
    < /script>


  3. Find your Web Part DIV ID using View Source on WebPage.

    Ex. - open your WebPart Page and right click on this then click on View Source and then find your WebPart
    using Ctl+F. Then you can get DIV id of your WebPart copy this and Paste on above code mark in Bold line.

    //Controls which Web Part or zone to print
    var WebPartElementID = "..........";

Click here for more details.