locked
How to print Div content. RRS feed

  • Question

  • User-930371450 posted

    Hi Team,

    How to print Div content using Jquery. 

    And please help me how to display same print preview in same page.

      function printData() {
                   
                   $('.dvPrintSystemImplementation').css('display','inline');
                    var divToPrint = document.getElementById("dvPrintSystemImplementation");
                    newWin = window.open("");
                    newWin.document.write(divToPrint.outerHTML);
                    $('.dvPrintSystemImplementation').css('display','none');
                    newWin.print();
                    newWin.close();
    
                }
    
    
    
    $("#hrefPrint").click(function () {
                    // Print the DIV.
                    //$(".dvSystemImplementation").css({display: "none"});
    
                    printData();
                    return (false);
                });
    <input type="button" name="print" id="hrefPrint" value="Print Report" />
    <div style="display:none" class="dvPrintSystemImplementation">Test</div>

    Getting bellow error

    Uncaught TypeError: Cannot read property 'outerHTML' of null
    at printData (SystemResult.aspx:105)
    at HTMLInputElement.<anonymous> (SystemResult.aspx:116)
    at HTMLInputElement.dispatch (jquery-1.7.1.min.js:3)
    at HTMLInputElement.i (jquery-1.7.1.min.js:3)
    at HTMLInputElement.nrWrapper (SystemResult.aspx:54)

    Tuesday, January 28, 2020 5:31 PM

All replies

  • User303363814 posted

    The error message tells you that you are trting to access the 'outerHTML' property of something which is null.  The 'something ' is 'divToPrint'. 

    You are using the DOM method getElementById but your div does not have an Id and so geElementById returns null.

    You could use getElementsByClassName which will return a collection of all the elements that have that class applied and then print them one by one.

    You could add an id to the div you want to print and use getElementById.

    In general, if you are using jquery then I would recommend using jquery always and not mixing with DOM methods.  Using jquery you can get the collection of elements with a given class as you have done already.  To get elements by id you prefix the id with '#' rather than '.'.  So, it would be

    var divToPrint = ${'#myPrinDivId'};

    Tuesday, January 28, 2020 10:09 PM
  • User1535942433 posted

    Hi SSK_Nani,

    Accroding to your description and codes,I suggest you could set the id of div and getElementById.I create a little test for you.

    More details,you could refer to below codes:

      <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script>
            $(function () {
                $("#hrefPrint").click(function () {
                    printData();
                    return (false);
                });
            })
            function printData() {
                $("#divtoprint").css('display', 'inline');
                var divToPrint = document.getElementById("divtoprint").innerHTML;
                newWin = window.open("");
                newWin.document.write(divToPrint);
                $('.dvPrintSystemImplementation').css('display', 'none');
                newWin.print();
                newWin.close();
    
            }
        </script>
    
            <input type="button" name="print" id="hrefPrint" value="Print Report" />
            <div style="display: none" class="dvPrintSystemImplementation" id="divtoprint">Test</div>

    Result:

    Best regards,

    Yijing Sun

    Wednesday, January 29, 2020 10:43 AM