javascript打印代码无法正常工作

Question

My java script print code is not working properly. I have this code is dialog box. when user clicks on print button I am calling print() function. The problem I am facing when My print section is opening in Chrome data and table are not coming fine in preview.

I tried to implement this code here

HTML code:

   <div class="modal-body">
                <div class="" id="mydata">
                    <div id="grid">Some Data</div>
                </div>
            </div>

<button type="button" id="outageSummary_printBtn" class="btnPrint" data-dismiss="modal" onclick="print()>Print</button>

JS Code :

function print(data, event) {
                event.preventDefault();
                printElement(document.getElementById("grid"));
            };

function printElement (elem) {
                var domClone = elem.cloneNode(true);
                var $printSection = document.getElementById("grid");
                if (!$printSection) {
                    var $printSection = document.createElement("div");
                    $printSection.id = "grid";
                    document.body.appendChild($printSection);
                } else {
                    $printSection.innerHTML = "";
                    $printSection.appendChild(domClone);
                }

                var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
                if (is_chrome == true) {
                    window.print();
                    if (window.stop) {
                        location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
                        window.stop(); //immediately stop reloading
                    }
                } else {
                    window.print();
                }
                return false;
            };

CSS Code:

@media screen {
    #grid {
        /*display: none;*/
    }
}

@media print {
    body * {
        visibility:hidden;
    }
    #grid, #grid * {
        visibility:visible;
    }
    #grid {
        position:absolute;
        left:0px;
        top:0px;
    }

}

I checked lot of print functionality, but I am not able to get this issue. I believe this is related to CSS or when I am adding Html element.

Please Guide !!

Answer 1

Unfortunately I cannot post as a comment, but do you mean that it shows correctly in the preview, but not on the webpage?

(Also from the code you've posted, it seems you're missing the below [or an onclick function on the button]:

document.getElementById("outageSummary_printBtn").onclick = function () { printElement(document.getElementById("grid")); };

Sorry if you've deliberately left this out in the snippet)