locked
change print preview js file to print spesific div RRS feed

  • Question

  • User-1634604574 posted

    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);

    Sunday, January 12, 2020 9:18 PM

All replies

  • User1535942433 posted

    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

    Monday, January 13, 2020 6:44 AM