CODEWITHSUNDEEP
javascripthtmlinternet-exploreriframeprinting
Shrinivas
Shrinivas

Reputation: 65

Print IFrame in ie10 doesn't work

I am trying to print a dynamically created iframe in IE10. It neither throws error nor works. Below is my code.

function PrintVisitSlip() {
    var f = document.getElementById('frmPrintVisitSlip');
    var ifrm = document.createElement("iframe");
    ifrm.src = 'about:blank';
    ifrm.style.display = "none";
    document.body.appendChild(ifrm);
    var _styleCSS = '<style type="text/css">p{border-bottom: white;}.Head{font-size: 9pt;font-weight: bold;}'
        + 'td{border-bottom: 1px solid black;height: 8px;padding: 0px 0px 0px 0px;margin: 0 0 0 0;font-size: 7pt;padding: 1px 0 1px 0;}'
        + '.LC{width: 125px;text-align: left;padding-left: 4px;}.RC{width: 21px;text-align: right;padding-right: 3px;}'
        + '.LC1{width: 80px;text-align: left;padding-left: 4px;font-size: 6.5pt;}.RC1{width: 18px;text-align: right;}</style>';
    ifrm.contentWindow.document.open('text/html', 'replace');
    ifrm.contentWindow.document.write(_styleCSS + f.outerHTML);
    ifrm.contentWindow.document.close();
    var iw = ifrm.contentWindow || ifrm;
    iw.focus();
    iw.print();
    return false;
}

This code works fine in chrome. But in IE10 I doesn't see any print window populating on click of print button.

Upvotes: 3

Views: 2707

Answers (1)

noseratio
noseratio

Reputation: 61666

Try printing it when readyState of the iframe's document is complete, as open.write is async under IE. Moreover, ifrm.style.display = "none" prevents the frame from being printed, so the whole window gets printed instead.

The following code has been verified with IE10. It may not work with other browsers.

<!DOCTYPE html>
<head>
    <title>main</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script>
        function Go() {
            var ifrm = document.createElement("iframe");

            ifrm.src = 'about:blank';
            ifrm.style.borderWidth = 0;
            ifrm.style.width = 0;
            ifrm.style.height = 0;

            document.body.appendChild(ifrm);

            ifrm.contentWindow.document.open("text/html", "replace");

            ifrm.contentWindow.document.onreadystatechange = function () {
                if (ifrm.contentWindow.document.readyState === "complete") {
                    ifrm.contentWindow.document.body.onafterprint = function () {
                        ifrm.removeNode(true);
                    }
                    ifrm.contentWindow.document.body.focus();
                    ifrm.contentWindow.print();
                }
            }

            ifrm.contentWindow.document.write("<b>Hello</b>, world!");
            ifrm.contentWindow.document.close();
        }
    </script>
</head>
<body>
    <button onclick="Go()">Go</button>
</body>

Upvotes: 3

Related Questions