CEWP Print Button with Code to print SharePoint form?

Question

I currently have a Preview of our form that looks exactly how we want it to look for the list item being viewed but the problem is when I added my Print button as CEWP in FOrm Display it performs the exact same function as using Control P and prints the entire page. See code.

          <div style="text-align: center"><input onclick="window.print();return false;" type="button" value=" Print this page "/>&#160;</div>"

I want to add onto this to have it only print the form and no other content out side of the current view in the window and actually fill an 8.5 by 11.

Any ideas?

Maybe a media query e.g. http://www.joshuawinn.com/css-print-media-query/ — Plato, Oct 16 '13 at 16:04

Aron Foster · Accepted Answer · 2013-10-16T17:41:16.830

0

Inspired by this InfoPath print button, one solution would be to grab the contents of your CEWP and create a new window that only contains those.

var patt = /**your CEWP ID here***/g;
var alldivs = document.getElementsByTagName('div');
var printpageHTML = '';
for(var i=0; i<alldivs.length; i++){
  if(patt.test(alldivs[i].id)){
    printpageHTML = '<HTML><HEAD>\n' +
      document.getElementsByTagName('HEAD')[0].innerHTML +
      '</HEAD>\n<BODY>\n' + 
      alldivs[i].innerHTML.replace('inline-block','block') + 
      '\n</BODY></HTML>';
    break;
  }
}
var printWindow = window.open('','printWindow');
printWindow.document.open();
printWindow.document.write(printpageHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();

Fixed: removed escaping for HTML characters.

edited Oct 16 '13 at 17:41

answered Oct 16 '13 at 16:16

Aron Foster

558
7
18

I am getting the new window to open but it is blank. I believe I am using the correct CEWP ID but it doesn't seem to be bringning anything up. Where should I be pulling the CEWP ID from? – user2887014 Oct 16 '13 at 17:19
In Internet Explorer, use F12 developer tools. Select element by click is particularly handy to find the code that's rendering your web part. One of my content editor web parts is named `WebPartWPQ2`. – Aron Foster Oct 16 '13 at 17:29
This works beautifully! Does exactly what I want it to. Cheers! – user2887014 Oct 16 '13 at 18:00

score 0 · Answer 2 · answered Mar 30 '16 at 11:55

Simple print functionality:

<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>

<script type="text/javascript">
function printpage() {
    //Get the print button and put it into a variable
    var printButton = document.getElementById("printpagebutton");
    //Set the print button visibility to 'hidden' 
    printButton.style.visibility = 'hidden';
    //Print the page content
    window.print()
    //Set the print button to 'visible' again 
    //[Delete this line if you want it to stay hidden after printing]
    printButton.style.visibility = 'visible';
  }
 </script>

CEWP Print Button with Code to print SharePoint form?

2 Answers2