CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromeiframe
n4gys4nyi
n4gys4nyi

Reputation: 933

How to print webpages with iframe and css

I have to print the contents of a dialog. I'm adding a empty iframe then i add contents to it in javascript.

this is my js code where i add html and css as children of iframe

    var layoutCSS = new String('<link href="css/ReportPageOne.css" rel="stylesheet" type="text/css">');
    var pageOneCSS = new String('<link href="css/ReportLayout.css" rel="stylesheet" type="text/css">');
    var pageTwoCSS = new String('<link href="css/ReportPageTwo.css" rel="stylesheet" type="text/css">');
    var materialityCSS = new String('<link href="css/MaterialityMatrix.css" rel="stylesheet" type="text/css">');
    window.frames.print_frame.document.head.innerHTML = layoutCSS + pageOneCSS + pageTwoCSS + materialityCSS;
    window.frames.print_frame.document.body.innerHTML = $('#__dialog1-cont').html();
    window.frames.print_frame.window.focus();
    window.frames.print_frame.window.print();

opens the print dialog properly but css is not applied quite well.

On print page in options i checked in 'Background graphichs' and i am using google chrome.

Upvotes: 2

Views: 2756

Answers (1)

abbotto
abbotto

Reputation: 4339

You are calling frame.print() before the styles have loaded.

"The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content."

Try this:

head.lastChild.addEventListener("load", function (event) {
    // In IE, you have to focus() the Iframe prior to printing
    // or else the top-level page will print instead
    frame.focus();
    frame.print();
}, 0);

References

Upvotes: 4

Related Questions