Last post Jan 13, 2020 06:44 AM by yij sun
Member
75 Points
513 Posts
Jan 12, 2020 09:18 PM|zhyanadil.it@gmail.com|LINK
i have this file js this will print whole body i want to make change to print spesific div how can i do it
/*! * jQuery Print Previw Plugin v1.0.1 * * Copyright 2011, Tim Connell * Licensed under the GPL Version 2 license * http://www.gnu.org/licenses/gpl-2.0.html * * Date: Wed Jan 25 00:00:00 2012 -000 */ (function($) { // Initialization $.fn.printPreview = function() { this.each(function() { $(this).bind('click', function(e) { e.preventDefault(); if (!$('#print-modal').length) { // $.printPreview.loadPrintPreview(); window.print() } }); }); return this; }; // Private functions var mask, size, print_modal, print_controls; $.printPreview = { loadPrintPreview: function() { // Declare DOM objects print_modal = $('<div id="print-modal"></div>'); print_controls = $('<div id="print-modal-controls">' + '<a href="#" class="print" title="Print page">Print page</a>' + '<a href="#" class="close" title="Close print preview">Close</a>').hide(); var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />'); // Raise print preview window from the dead, zooooooombies print_modal .hide() .append(print_controls) .append(print_frame) .appendTo('body'); // The frame lives for (var i=0; i < window.frames.length; i++) { if (window.frames[i].name == "print-frame") { var print_frame_ref = window.frames[i].document; break; } } print_frame_ref.open(); print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' + '<head><title>' + document.title + '</title></head>' + '<body></body>' + '</html>'); print_frame_ref.close(); // Grab contents and apply stylesheet var $iframe_head = $('head link[media*=print], head link[media=all]').clone(), $iframe_body = $('body > *:not(#print-modal):not(script)').clone(); $iframe_head.each(function() { $(this).attr('media', 'all'); }); $('body > *:not(#print-modal):not(script)').clone().each(function() { $('body', print_frame_ref).append(this.outerHTML); }); $('head link[media*=print], head link[media=all]').each(function() { $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML); }); // Disable all links $('a', print_frame_ref).bind('click.printPreview', function(e) { e.preventDefault(); }); // Introduce print styles $('head').append('<style type="text/css">' + '@media print {' + '/* -- Print Preview --*/' + '#print-modal-mask,' + '#print-modal {' + 'display: none !important;' + '}' + '}' + '</style>' ); // Load mask $.printPreview.loadMask(); // Disable scrolling $('body').css({overflowY: 'hidden', height: '100%'}); $('img', print_frame_ref).load(function() { print_frame.height($('body', print_frame.contents())[0].scrollHeight); }); // Position modal starting_position = $(window).height() + $(window).scrollTop(); var css = { top: starting_position, height: '100%', overflowY: 'auto', zIndex: 10000, display: 'block' } print_modal .css(css) .animate({ top: $(window).scrollTop()}, 400, 'linear', function() { print_controls.fadeIn('slow').focus(); }); print_frame.height($('body', print_frame.contents())[0].scrollHeight); // Bind closure $('a', print_controls).bind('click', function(e) { e.preventDefault(); if ($(this).hasClass('print')) { window.print(); } else { $.printPreview.distroyPrintPreview(); } }); }, distroyPrintPreview: function() { print_controls.fadeOut(100); print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){ print_modal.remove(); $('body').css({overflowY: 'auto', height: 'auto'}); }); mask.fadeOut('slow', function() { mask.remove(); }); $(document).unbind("keydown.printPreview.mask"); mask.unbind("click.printPreview.mask"); $(window).unbind("resize.printPreview.mask"); }, /* -- Mask Functions --*/ loadMask: function() { size = $.printPreview.sizeUpMask(); mask = $('<div id="print-modal-mask" />').appendTo($('body')); mask.css({ position: 'absolute', top: 0, left: 0, width: size[0], height: size[1], display: 'none', opacity: 0, zIndex: 9999, backgroundColor: '#000' }); mask.css({display: 'block'}).fadeTo('400', 0.75); $(window).bind("resize..printPreview.mask", function() { $.printPreview.updateMaskSize(); }); mask.bind("click.printPreview.mask", function(e) { $.printPreview.distroyPrintPreview(); }); $(document).bind("keydown.printPreview.mask", function(e) { if (e.keyCode == 27) { $.printPreview.distroyPrintPreview(); } }); }, sizeUpMask: function() { return [$(document).width(), $(document).height()]; }, updateMaskSize: function() { var size = $.printPreview.sizeUpMask(); mask.css({width: size[0], height: size[1]}); } } })(jQuery);
Contributor
3730 Points
1426 Posts
Jan 13, 2020 06:44 AM|yij sun|LINK
Hi zhyanadil.it@gmail.com,
As far as I think,I suggest you could split the special div and put it in a new window.
More details,you could refer to below codes:
<script> function printData() { var divToPrint = document.getElementById("printTable"); newWin = window.open(""); newWin.document.write(divToPrint.outerHTML); newWin.print(); newWin.close(); } $('button').on('click', function () { printData(); }) </script> <table border="1" cellpadding="3" id="printTable"> <tbody> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody> </table> <br /> <br /> <table border="1" cellpadding="3" id="notPrintTable"> <tbody> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>test</td> <td>test</td> <td>000</td> </tr> </tbody> </table> <br /> <br /> <button>Print me</button>
Result:
Best regards,
Yijing Sun
Member
75 Points
513 Posts
change print preview js file to print spesific div
Jan 12, 2020 09:18 PM|zhyanadil.it@gmail.com|LINK
i have this file js this will print whole body i want to make change to print spesific div how can i do it
Contributor
3730 Points
1426 Posts
Re: change print preview js file to print spesific div
Jan 13, 2020 06:44 AM|yij sun|LINK
Hi zhyanadil.it@gmail.com,
As far as I think,I suggest you could split the special div and put it in a new window.
More details,you could refer to below codes:
<script> function printData() { var divToPrint = document.getElementById("printTable"); newWin = window.open(""); newWin.document.write(divToPrint.outerHTML); newWin.print(); newWin.close(); } $('button').on('click', function () { printData(); }) </script> <table border="1" cellpadding="3" id="printTable"> <tbody> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody> </table> <br /> <br /> <table border="1" cellpadding="3" id="notPrintTable"> <tbody> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>test</td> <td>test</td> <td>000</td> </tr> </tbody> </table> <br /> <br /> <button>Print me</button>
Result:
Best regards,
Yijing Sun