仅打印页面的一部分(容器元素及其内容)

时间:2015-10-16 10:13:43

标签: javascript jquery printing

我试图只打印页面的一部分,例如从指定的元素容器包装器,下面是我尝试但似乎不幸的是没有工作。

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

它给了我一个错误:

  

打印不是功能

任何想法,帮助,线索,建议?

2 个答案:

答案 0 :(得分:0)

试试这个

如果你需要css / js,那么添加如下或删除

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

答案 1 :(得分:0)

print不是jQuery元素的函数。

正如评论中指出的那样,已经有了几个好的答案here,以及一个CSS解决方案here(不是接受的答案 - 这就是垃圾!)。

这里有几种方法我已经被淘汰了。它并不像看起来那么简单 - 你可能仍然需要CSS,第二个可能不适用于更复杂的页面,但它可以让你了解你想要实现的目标。

$.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/