javascript print code is not working properly

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 !!

Null Void · Answer 1 · 2014-06-13T07:54:03.557

0

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)

edited Jun 13 '14 at 07:54

answered Jun 13 '14 at 07:39

Null Void

41
6

1

yes.. correct.. in preview it is not displaying with correct style. – Javascript Coder Jun 13 '14 at 09:29
1

yes I have not added in snippet.. I have updated my code.. pls check. – Javascript Coder Jun 13 '14 at 09:32
According to this: http://stackoverflow.com/a/15253634/3647003, print css rules don't automatically hold preference over non-print css rules. If this is the case, both that answer and this link: http://css-tricks.com/when-using-important-is-the-right-choice/ suggest the use of !important. Using !important is generally frowned upon because it can make future additions to the CSS annoying, but this could possibly help with debugging the issue. – Null Void Jun 13 '14 at 10:43

javascript print code is not working properly

1 Answers1