Printing SharePoint WebPart content

Try the following steps. It works for most web parts (i
have used this for lists)

1. Start with a web part
You start by having a web part with a display of information, such as a list.
If you don’t have one already you can start by creating a SharePoint Event List,
and then, adding a Calendar web part (remember to choose the Calendar View).
2. Add the Print Button
You will be adding a Print Button to the page, by putting the JavaScript below
into a Content Editor Web Part.
Add a Content Editor Web Part to the page with the web part you want to print.
Open its properties and click the Source Code button to add the JavaScript code.
Copy the following code directly into the Text Builder box. This code will
create a “Print Web Part” button that when clicked, will execute the print
action.
<center><input type="button" OnClick="javascript:void(PrintWebPart())"
value="Print Web Part"></center>
<script 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 = '<HTML>\n<HEAD>\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</HEAD>\n<BODY>\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//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>
3. Connect the Print Button to the Web Part
To do this we need the <DIV> tag ID for the Web Part we want to print, then,
we modify the ID in the JavaScript of the Print Button.
To find out the ID of the Web Part we want to print:
Using your browser, right mouse click on the page where the Web Part is
installed and choose “View Source”. This will open a view of your page in HTML
within Notepad.
Press CTRL-F, to initiate a Find. Enter the Title of your Web Part. You may need
to execute a find a couple of times as your navigation may show “Events” as
well.
Once you have located the HTML for your Web Part for example; “<td accesskey="W"
tabindex="0" title="Events" id="WebPartTitleWPQ6" style="width:100%;">”, look
later in the HTML for a <DIV> tag which matches the Web Part Queue Number, in
this case WPQ6. In our case it looks like “<div
WebPartID="d44df3e3-0bbc-4151-9d04-22982bd294bc" HasPers="false"
id="WebPartWPQ6"…”.
The “WebPartWPQ6” would be the ID we want. The key part of the ID is to know if
it is 1, 2, 3, etc. Here it is 6.
To modify the Print Button JavaScript:
Modify the Content Editor Web Part which contains the JavaScript you pasted
earlier and go into the Source View.
Look for the line “//Controls which Web Part or zone to print”, the line
underneath controls the ID near the top.
Replace the “WebPartWPQ6” with the ID you copied from the source of the page and
click “OK”.
Save the changes and click OK.
4. Print the Web Part Content
We are now ready to test what you have labored to create. Once the page has
been refreshed inside of Internet Explorer, click on the “Print Web Part”
button. You should see a new Window with the content of your web part.
If your pop-up blocker IS NOT turned on, you will get the Print Dialogue.
If it is turned on, then you can go to File Print or Print Preview.
Now, print the content.

Comments

  1. WillOctober 15, 2014 at 4:49 PM

    Works great!

    ReplyDelete
  2. UnknownMarch 9, 2015 at 8:39 AM

    it works great thank you how we can make it print automatically

    ReplyDelete
  3. Mon Ching NgAugust 24, 2015 at 10:49 AM

    Hi How can I get it to print all webparts across several pages?

    ReplyDelete
  4. ashleySeptember 14, 2015 at 2:28 PM

    How can I add a header or other formatting on the printout?

    ReplyDelete
  5. aaaOctober 11, 2015 at 5:06 AM

    hi, how can I show "print preview window" instead of "print window"?

    ReplyDelete
  6. Daddio13December 9, 2015 at 4:09 PM

    I need some help....the above works perfect for my display/edit InfoPath Forms. But I also want my customers to be able to fill out the InfoPath Form and Print it right there and there (print the new form)

    My issue is: I have a date field. After I fill out the form and hit "print", everything comes up as it is supposed to, but then a date picker calendar pops up from my date field. If I continue and hit print, the mini calendar is the only thing that prints. Any clue on why that happens?

    ReplyDelete
  7. Ravi Kumar RapoluDecember 10, 2015 at 11:59 AM

    try this way, make datepicker as readonly when the print button active

    ReplyDelete
    Replies
    1. Daddio13December 10, 2015 at 1:33 PM

      GREAT....how do you do that? Where does it go, in the code from above?

      Delete
  8. UnknownOctober 19, 2017 at 4:25 AM

    I'm using the same code the webpart is displayed in preview but when i print its blank. Kindly please guide me if im missing something

    ReplyDelete

Post a Comment

Popular posts from this blog

SharePoint 2016 and 2019 Ports

http://sharepoint2016server.blogspot.com/2016/10/sharepoint-2016-ports-list.html SharePoint 2019: Distributed Cache : TCP Port 22233, 22236 : UDP Port N/A : Protocols ICMP Type 0 (ping) People Picker : TCP Port 53, 88, 135, 137–139, 389, 445, 636, 749, 750, 3268, 3269 : UDP Port N/A 53, 88, 137–139, 389, 445, 749 : UDP Port N/A : Protocols N/A Sandbox Service : TCP Port 32846 : UDP Port N/A : protocols N/A Search Crawler : TCP Port Web Application Ports Used (e.g., 80, 443) : UDP Port N/A : Protocols N/A Search Index : TCP Ports 16500–16519 : UDP Port N/A : Protocols N/A Service Applications : TCP Port 32843, 32844 : UDP Port N/A : Protocols N/A SQL Server : TCP Port 1433 (default) : UDP Port 1434 (default) : Protocols N/A WCF Services : TCP Port 808 : UDP Port N/A : Protocols N/A User Profile Service : TCP Port 53, 88, 389, 5725, 1025–5000, 49152–65536 : UDP Port 53, 88, 389, 464 : Protocols N/A SMTP : TCP Port 25 (default), 587 (TLS default) : UDP Port N/A : Protocols ...
Read more

Clear fields based on drop-down values in PowerApps

Clear current selection from drop down when another drop down value changes 1) Parent drop-down is States 2) Child drop-down is City We can hide and show the City drop-down based on States Value changes NOTE: Please use your DataCardValues and  lv_dpclear is local variable Select City data card and go to the Advanced properties for DataCard Look for the Visible property and write the below code If(DataCardValue3.Selected.Value="VA",true,false) For clearing the City dropdown selected value based state changes. Select the State drop-down (first drop-down) and go to Advanced use the below code in OnChange  UpdateContext({lv_dpclear: true}); UpdateContext({lv_dpclear: false})  In the Reset property of the second dropdown(City), add the below code       lv_dpclear -------------------------------------------------------------------- Clearing text box and Date Control values based on dropdown selection: Add belo...
Read more

Hide a SharePoint list field based on user group using JQuery Webservice in 2010

A field in a SharePoint list form like NewForm.aspx or EditForm.aspx can be easily hidden by using the following Jquery statements. Assume that we have an input field named Feedback var feedbackField = $("input[title=Feedback]"); feedbackField.parent().parent().parent().hide();    But what if we want to hide the field for a particular SharePoint user group only. Let's say we have a user group named "Test Group" and we don't want to show the Feedback field to the users of this group. In order to achieve this we need to know whether the current logged in user belongs to the "Test Group" or not.This can be done by using   SPServices , a Jquery library for SharePoint web services. Grab the latest version of SPServices Jquery library from codeple x and Jquery from here . Once you have both .js files, upload them to a SharePoint document library. In my case I created a folder named JS inside Shared Documents Document library and uploaded both files...
Read more