Thursday, October 15, 2015

Print Lightbox made easy.

Spent several hours on this request and with the assistance from colleagues on printing a lightbox, finally succeeded in that. It was ironical that I had to struggle printing a print summary with the styles. Let me give you the steps here which can ease this process for you. Jquery api has been used.

1. Create the Lightbox and have that section with class as "printable".
2. Have a button for Print. <input type="button" id="print">
3. In the click event, use this following code

    $('#print').click(function(e){
          $('head').append('<link href="/assets/css/themes/myprintstyle.css" rel="stylesheet"            type="text/css" media="print">');
         setTimeout(function(){
         $( ".printable" ).print();
         //printDiv('print-preview');
     },2000);
    e.preventDefault();
});

     

No comments:

Post a Comment