想要使用JavaScript打印页面的特定部分

Question

I'm basing my code off of this solution by Ben Nadel

Here is the code included in the page

<script type="text/javascript">
    // When the document is ready, initialize the link so
    // that when it is clicked, the printable area of the
    // page will print.
    $(function() {
        // Hook up the print link.
        $("a").attr("href", "javascript:void(0)").click(function() {
            // Print the DIV.
            $( ".printable" ).print();

            // Cancel click event.
            return(false);
        });
    });
</script>

Here is a codepen

The Buttons are not working in the pen but do work locally.

What i'm trying to do is have the user print the contents of each list item which as you can tell is a Q&A so essentially have the user be able to print each Q&A pair when they click the button.

I've only included two to provide the minimal example to help me figure out where my error is.

What's happening is that no matter which button I click it will always print the first "li" with the class of "printable" and i'm not sure how to distinguish each section so that the button understands to only print 'this' and not the first li that has that class which is what it's doing.

Obviously this is a problem since each Answer will have a "click to print" button and I don't want them to all print the same Q&A pair.

Does this make sense?

My instinct is to have some kind of loop in play or iterate through an array, but i'm very new to JavaScript so i'm looking for a moderately challenging solution.

Answer 1

You can use simple java script to print specific div of a page

    var prtContent = document.getElementById("your div id");
    var WinPrint = window.open('','','letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();

Answer 2

Yes, it does make sens. You are selecting elements to print with $('.printable').print([1]); It means, print the first element that match my selection, that is .printable. The first element that has the class printable. What you should do is bind each button with the appropriate section and use IDs instead of classes to select elements. As IDs are unique !

function(){
        $('.printBtn').attr('href', 'javascript:void( 0 )').click(function(){
            //select the corresponding section, first parent li that have .printable class
            var section = $(this).closest("li.printable");
            // Print Div
            $(section).print([1]);

            // Cancel click event
            return(false);
        });