2

I have retrieved data from a list using SPServices and displayed it in a table. Now I need to print the table using jquery. Is that possible?

2

Yes very much it is possible, below can get you started...

Create a div with id like below above your html table, we will use this div later.

  <div id="printableArea">
         <table>....DISPLAYING SHAREPOINT DATA......... </table>
    </div>

<input type="button" onclick="printDiv('printableArea')" value="Print" />

Create a js function which take care of printing.

 function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(printContents );
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

Now when user clicks the print button, it will print the table, please note to print with css you need to load required css files also as mentioned above in optional stylesheet.

  • This is the correct answer. – lazoDev Nov 14 '16 at 14:05
  • But I have 16 columns in that table...When I tried printing it is printing only 8 columns...Is there a way to fix it? – Dheeraj Dec 16 '16 at 7:32
  • does your 16 columns visible on single page view ? If it is, it should print also.. you need to make sure all the 16 columns are fitted in single page view...use some css trick to do that... – Siddharth Vaghasia Dec 16 '16 at 9:17
  • They are not visible in the single page – Dheeraj Dec 16 '16 at 9:36
  • that is how print works....you need to make sure all the columns are visible on single page view... using css trick to make font smaller, wrap text in columns, but honestly i don't think 16 columns unless it is just numbers can be displayed in single page, be it sharepoint or any html.. – Siddharth Vaghasia Dec 16 '16 at 10:08
1

This is working for me.

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

http://jsfiddle.net/dimshik/9DbEP/4/

0

You can use jQuery print plugin for printing part of a page.

https://github.com/DoersGuild/jQuery.print

0

use below button and Onclick event to print

<input type="button" style="margin-left:42%;margin-bottom:20px;font-size:23px;width:55px;background-color: rgb(0, 204, 0);color: black;font-weight: 500;padding: 7px 10px;border: 1px solid #B9B9B9;min-width:6em" id="btnPrint1" value="Print" onClick="window.print();window.location.reload();" />

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.