0

I am doing some testing on SharePoint lists/forms and am stuck a bit on a print function/button that I want to implement in one of my forms.

Out of a list that I created with LOTS of columns, I formed a new display form (DispForm.aspx) and use this as a means for users to view their form after registration.

After searching over the internet I came across lots of articles and blog posts concerning this but could not use the existing workarounds in my case.

I need to print the display form but when using the <a "href="javascript:window.print()">Print</a>" script, it does print the form, but with the buttons also, which should not be the case.

Is there a way, if that's not too much asking, to print only the columns/fields/rows in the form?

Improve this question
3
  • The way i have done this in the past was to create a new custom form and place everything into a DIV (or other container) and give it an ID. You can then follow this: stackoverflow.com/a/7532581/5051773 on how to print everything in that div. – Roland Aug 8 '16 at 6:03
  • Thanks for your reply Roland, much appreciated. I have a question though, I add the new form in a new container, which can be done in SP designer i'm sure. the in the javascript, I specify the Div name in the function right? I hoe this is goint to work. – Vish Aug 8 '16 at 6:09
  • I added a <Div> to contain only the columns/content to be printed as advised. I then created a button with an onclick event to call the function as you specified. Works perfectly fine and I guess this answers my question. Thanks a lot for the help. Cheers. – Vish Aug 8 '16 at 7:55
0

Button 

 <input type="button" onclick="printDiv('DivName')" style="width: 64px; height: 64px; background-image: url(print.jpg);"/>

Javascript 

    function printDiv(DivName) {

        //Get the HTML of div
        var divElements = document.getElementById(DivName).innerHTML;

        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = divElements;

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;

    }
</script>​​
Improve this answer
4
  • This won't work because for SharePoint inline script tags like onclick aren't allowed. have to bind the event from javascript outside of the html. – kovac Aug 8 '16 at 9:54
  • I used the script above and it works perfectly fine for me. – Vish Aug 9 '16 at 6:13
  • Oh okay. Every time I do this using JSOM and put the kind of button you described in a content editor, it strips the inline tags. How did you place the button on the page? Is it in the aspx form or did you use a content editor web part? – kovac Aug 9 '16 at 8:20
  • What I did is simple: - Open the list - Form web parts - New Display Form - In the display form, click on site actions and edit the page - On the top of the page, you will find a container which says "Click here to add a new web part", click on that and add the content editor. - Click in the content editor and in the top ribbon, click on edit HTML source - Here I add the code for the button first, and then the javascript a few lines below. – Vish Aug 12 '16 at 8:43
0

  • All Data Content Include Div Tag.

  • Written code OnClientClick event..

    OnClientClick="window.print(); return false"

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.