Geek Answers Handbook

How to create print mode using javascript, jquery etc.

let's say I have a print button on multiple pages and whenever the user clicks. it will pop up content in modal and can print from there. Any idea would be appreciated.

I have a couple of pages with a print button. when the user clicks on it, it is necessary to push this content in a modal format, and not print from this modal file.

+4
source share
1 answer

I can’t write the code for you right now, but I can put you on the right track.

You need to use jquery to get the content you want to print (most likely $('body').html(); ), then create your modal div popup and add an iframe to the modal div. Then add iframes (via $('iframe').document.body.append(); ) to the body of the print. Then call print on iframe ( $('iframe').window.print; )

Let me know if that makes sense?

EDIT . Here is an example of code that works with what I think you need. (make sure you include jquery before this javascript code)

  <body> <script> $(document).ready(function(){ $('#printmodal').click(function(){ // variables var contents = $('#printable').html(); var frame = $('#printframe')[0].contentWindow.document; // show the modal div $('#modal').css({'display':'block'}); // open the frame document and add the contents frame.open(); frame.write(contents); frame.close(); // print just the modal div $('#printframe')[0].contentWindow.print(); }); }); </script> <style> #modal { display: none; width: 100px; height: 100px; margin: 0 auto; position: relative; top: 100px; } </style> <!-- Printable div (or you can just use any element) --> <div id="printable"> <p>This is</p> <p>printable</p> </div> <!-- Print link --> <a id="printmodal" href="#">Print Me</a> <!-- Modal div (intially hidden) --> <div id="modal"> <iframe id="printframe" /> </div> </body>

jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/

+10
source

More articles:


All Articles