Print Preview Is Blank After adding External Stylesheet reference in print html content

Question

I want to print DIV content of a page.What i do is retrieve contents of the div using JS and pass it to new window obj on which i call .print(). THe Text contents and images are displayed as such. Just when i add this line to retrieved div contents

<link href="myprintstyle.css" rel="stylesheet" type="text/css">

the print preview is blank. I tried adding other stylesheets as well,same result. Whatever style sheet reference i add to print html contents,same result -blank preview page. here is My JS code to print page contents.

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">');
function Popup(htmldata) 
{
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20');
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>";
     mywindow.document.write(str);
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10

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

    return false;
}

Please suggest some fix. I want to style the print content. Browser: Chrome

The same code is working in Mozilla. But in Chrome i am facing this issue.

miqe · Accepted Answer · 2016-11-09 07:14:49Z

1

I know this is an old question but for anyone who is having this problem now here is the solution.

It is showing blank page because the document is not finished loading yet. so to fix it add mywindow.print() in a timeout .

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">');
function Popup(htmldata) 
{
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20');
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>";
     mywindow.document.write(str);
    mywindow.document.close(); // necessary for IE >= 10
    $( mywindow.document).ready(function(){
  //set this timeout longer if you have many resources to load
    setTimeout(function(){
       mywindow.focus();
       mywindow.print();
    },1000);

    return false;
}

answered Nov 9, 2016 at 7:14

miqe

3,3893 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Monish Sen Over a year ago

The page renders blank as the css has not finished loading

Monish Sen Over a year ago

however i've used window.onload function instead of setTimeout...since it cannot be reliably said if the css will be able to load in the given timeout

chasmani Over a year ago

Is there not a better way? The timeout is a bit hacky and if it takes longer to load the stylesheet then it will break and print a blank page

vandijkstef · Accepted Answer · 2016-01-16 19:06:51Z

0

CSS should be called from the head of the page, not the body.

answered Jan 16, 2016 at 19:06

vandijkstef

4143 silver badges8 bronze badges

2 Comments

zee Over a year ago

I have tried adding css in the head also,still doesn't work

vandijkstef Over a year ago

Hard to tell without a live example. I see the issue is Chrome only. Could you check the developer tools? (Rightclick -> inspect). You will be interested in the network tab (enable preserve log) and the resources tab (open the "frames" folder) to check if the stylesheet is loaded correctly. Also refer to the console, see if there are any errors there. Additionally you could use the elements tab to see what is going on the the HTML data. Another suggestion, add in 'media="print"' in your css link

Collectives™ on Stack Overflow

Print Preview Is Blank After adding External Stylesheet reference in print html content

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related