printing only a part of the page (container element and its content)

Question

Im trying to print only the part of my page e.g. from the specified element container wrapper, below is what i tried but seems unfortunately not working.

$("#j_print_container").print(); //window.print()

it gives me an error :

print is not a function

any ideas, help, clues, suggestions?

Duplicate of [http://stackoverflow.com/questions/1071962/how-to-print-part-of-rendered-html-page-in-javascript](http://stackoverflow.com/questions/1071962/how-to-print-part-of-rendered-html-page-in-javascript) This should work. — Prabhu Suriya, Oct 16 '15 at 10:19
even you can check this out too http://stackoverflow.com/questions/16456717/how-can-i-print-using-jquery — flipper, Oct 16 '15 at 10:20

score 0 · Accepted Answer · answered Oct 16 '15 at 10:19

0

try this

if you need css/js then add like below or remove

function printDiv(){    
    var divContent=$('#j_print_container').html();  
    var mywindow = window.open('', 'my div', 'height=600,width=750');
    var htm = '<html><head><title>Receipt</title><script src="'+contextPath+'scripts/lib/jquery.min.js" ></script><link rel="stylesheet" href="'+contextPath+'styles/style.css" type="text/css" /><link rel="stylesheet"'+
              'href="'+contextPath+'styles/custom.css" type="text/css" /><link rel="stylesheet" href="'+contextPath+'styles/font-awesome.min.css" type="text/css" />'+
              '<link rel="stylesheet" href="'+contextPath+'styles/bootstrap.min.css" type="text/css" />'+'</head><body >'+divContent;
    htm=htm+'</body></html>';
    mywindow.document.write(htm);
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10
    mywindow.print();
    mywindow.close();       
}

answered Oct 16 '15 at 10:19

Vishnu Katpure

293
3
15

this doesnt work, can your provide a snippet or a fiddle for it please? – Juliver Galleto Oct 20 '15 at 06:03
@Code Demon i use this function so many places its working correctly i will add fiddle after some time – Vishnu Katpure Oct 20 '15 at 06:08
what is contextPath? – Juliver Galleto Oct 20 '15 at 06:16
jsfiddle doesnt allow write method so for demo need your mail id to send demo – Vishnu Katpure Oct 20 '15 at 06:20
ah okay so you mean my project link like 'http://project.net/' ? – Juliver Galleto Oct 20 '15 at 06:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/92811/discussion-between-vishnu-katpure-and-code-demon). – Vishnu Katpure Oct 20 '15 at 06:22

score 0 · Answer 2 · edited May 23 '17 at 12:09

print is not a function on a jQuery Element.

As pointed out in the comments, there's a couple of good answers already here, and a CSS solution here (not the accepted answer - that's rubbish!).

Here's a couple of methods I've knocked up. It's not quite as simple as it seems - you may still need CSS, and the second may not work for more complex pages, but it gives you an idea of what you're trying to achieve.

$.fn.print = function(){
    var content = $(this).html();
    var w = window.open('about:blank','', 'width=800,height=600,top=100,left=100');
    w.document.write(content);
    w.print();
    w.close();
};

$.fn.print2 = function(){
    $('*').not(this).addClass('hidden-for-print').hide();
    $(this).children().removeClass('hidden-for-print').show();
    $(this).parents().removeClass('hidden-for-print').show();
    window.print();
    $('.hidden-for-print').show();
};

http://jsfiddle.net/daveSalomon/et7xxd2s/1/

nice! the first jquery function works but how about if im going to attach the print with a custom stylesheet, is there any way I could do that? — Juliver Galleto, Oct 20 '15 at 06:02
Sure, you could include a stylesheet in the first one. `w.document.write(content); w.document.write('');`. — Dave Salomon, Oct 20 '15 at 09:28

printing only a part of the page (container element and its content)

2 Answers2