CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
sandeep autade
sandeep autade

Reputation: 401

print div in chrome with css not working

I am using window.print(); for print specific part on web page, its working on firefox browser but not working correctly in Chrome it showing me blank print preview.

 <script type="text/javascript">
    function printDiv() {
    var divToPrint = document.getElementById('table');
    var htmlToPrint = '' +
        '<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />'+
        '<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />';
        $(document).ready(function() {
    $('#customers').dataTable();
        } );
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
}
    </script>

the above code was working fine in chrome also but from last 15 days it's not working in chrome but working in firefox

Upvotes: 2

Views: 3038

Answers (2)

Leonid Antipov
Leonid Antipov

Reputation: 11

I had a similar problem, where I wanted to print a created window with given css, but the css would not apply in chrome.

It turns out, that we need to wait until the created window has loaded, before we try to print it (found it here: https://stackoverflow.com/a/25396932/13294887). Basically by using

myWindow.onload = function() { 
  myWindow.print(); 
  myWindow.close();
};

https://jsfiddle.net/quoritius/qx2ujtby/21/

Upvotes: 1

sandeep autade
sandeep autade

Reputation: 401

the following code work for me fine 

<script type="text/javascript">
        $(function () {
            $("#btnPrint").click(function () {
                var contents = $("#table").html();
                var frame1 = $('<iframe />');
                frame1[0].name = "frame1";
                frame1.css({ "position": "absolute", "top": "-1000000px" });
                $("body").append(frame1);
                var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
                frameDoc.document.open();
                //Create a new HTML document.
                frameDoc.document.write('<html><head><title>DIV Contents</title>');
                frameDoc.document.write('</head><body>');
                //Append the external CSS file.
                frameDoc.document.write('<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />');
                frameDoc.document.write('<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />');
                //Append the DIV contents.
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
                setTimeout(function () {
                    window.frames["frame1"].focus();
                    window.frames["frame1"].print();
                    frame1.remove();
                }, 500);
            });
        });
    </script>

Upvotes: 2

Related Questions