CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
Gaurav Manral
Gaurav Manral

Reputation: 600

Print function not working in chrome

I have a print() function in my website which is used to print specific part of the website. It's working fine on Firefox and even on Internet explorer but is not working on chrome. It opens the dialog window and get the page counts too, but unable to get the content (in chrome).

my code is below:

<a href="#" onclick="PrintElem('#press_releas11')"><img src="images/print_icon.png" width="35" height="23" /></a>

<div class="blog_post" id="press_releas11">
    <div class="post_title"><h3>title here</h3></div>
    <div class="post_article">content here</div>
</div>

script:

<script type="text/javascript">

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>PressReleases</title>');
    mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('data');
    mywindow.document.write('</body></html>'); 

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10

    mywindow.print();
    mywindow.close();

    return true;
}

</script>

Upvotes: 4

Views: 15707

Answers (6)

Breno Rusciolelli
Breno Rusciolelli

Reputation: 11

function printModalResumeCalendar(data) {
    var showWindowCalendarModal = window.open('', '', `width=957, height=957`);
    showWindowCalendarModal.document.write(data);
    showWindowCalendarModal.document.close();
    delay = setInterval(checkReadyState, 10);

    function checkReadyState() {
        if (showWindowCalendarModal.document.readyState == "complete") {
            clearInterval(delay);
            showWindowCalendarModal.focus();
            showWindowCalendarModal.print();
        }
    }
    return true;
}

This script is perfect for this question!!

Upvotes: 0

Elaine
Elaine

Reputation: 1318

For those who could have a chance of the same issue I got. I decided to add this as an answer rather than a comment.

I tried all the above ways and it's still there even in IE works. Then I tried to just Ctrl+P here (on any website), the "print preview..." was still stuck there. So I realized this is not my program issue (or at least at that moment). So I switched Chrome printer to other one (like "Save to PDF"), and then switch back to "Print to PDF", it works....

No idea why it's suddenly abnormal.

Upvotes: 0

Muhammad Musavi
Muhammad Musavi

Reputation: 2706

As it was mentioned among answers, it has something to do with seconds, so I used setTimeout() like this:

    var mywindow = window.open('', 'PRINT', 'height=5100,width=1086');
    mywindow.document.write('<html><head><title>' + document.title + '</title>');
    mywindow.document.write('<link rel="stylesheet" href="App_Themes/Basic/Share/Workflow.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write("SomeData");
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    setTimeout(function(){ mywindow.print(); mywindow.close();}, 2000);

Upvotes: 3

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

It seems that Chrome doesn't like the document.write(). It helped to add a setTimeout of 1000ms after writing to the document and then calling mywindow.print(), but as that's not very practical and you already seem to be using jQuery, here's a working solution:

https://jsfiddle.net/2n88pxee/

Works in Chrome and Firefox, I haven't tried all other browsers, however.

Edit: and here's the code as requested in the comments

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');

    mywindow.document.head.innerHTML = '<title>PressReleases</title><link rel="stylesheet" href="css/main.css" type="text/css" />'; 
    mywindow.document.body.innerHTML = '<body>' + data + '</body>'; 

    mywindow.document.close();
    mywindow.focus(); // necessary for IE >= 10
    mywindow.print();
    mywindow.close();

    return true;
}

Upvotes: 8

Katharine Osborne
Katharine Osborne

Reputation: 7039

After using document.write, you need to use document.close. Then use a setInterval/clearInterval to watch when the document is finished writing. Tested in Chrome on Mac:

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>PressReleases</title>');
    mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('data');
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10

    myDelay = setInterval(checkReadyState, 10);

    function checkReadyState() {
        if (mywindow.document.readyState == "complete") {
            clearInterval(myDelay);
            mywindow.focus(); // necessary for IE >= 10

            mywindow.print();
            mywindow.close();
        }
    }

    return true;
}

Upvotes: 3

Dr.Molle
Dr.Molle

Reputation: 117354

The issue seems to be the embedded stylesheet, it has to be "downloaded", what takes some time, you try to print before the document is complete.

For me it works when I start printing when the readystate of the document is complete

function Popup(data) 
{
    var mywindow = window.open('', 'mydiv', 'height=400,width=600');
    mywindow.document.open();
    mywindow.document.onreadystatechange=function(){
     if(this.readyState==='complete'){
      this.onreadystatechange=function(){};
      mywindow.focus();
      mywindow.print();
      mywindow.close();
     }
    }
    mywindow.document.write('<html><head><title>PressReleases</title>');
    mywindow.document.write('<link rel="stylesheet" href="css/main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('data');
    mywindow.document.write('</body></html>'); 

    mywindow.document.close(); // necessary for IE >= 10


    return true;
}

http://jsfiddle.net/doktormolle/q2zv4s54/

Upvotes: 6

Related Questions