'iframe.contentWindow.print() print the content of the parent window on chrome browser on iphone

I want to print a html file by create a iframe,it works in desktop chrome and android chrome and safari,but it always print the parent window content on chrome on iphone.

    let iframe = document.createElement('iframe');
    let parentDIV = document.getElementById("printContent");
    iframe.width = '0';
    iframe.height = '0';
    iframe.style.display = "none";
    iframe.src = 'about:blank';
    iframe.title = "register ehr information";
    parentDIV.appendChild(iframe);
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(htmlStr);
    iframe.contentWindow.document.close();
    let doc = iframe.contentDocument || iframe.contentWindow;
    if (doc.document) doc = doc.document;
    let  _timer = setInterval(function() {
        if (doc.readyState === 'complete') {
            clearInterval(_timer);
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
            htmlStr = null;
            setTimeout(function(){
              parentDIV && parentDIV.removeChild(iframe);
            },10000)
        }
    }, 100);
javascripthtml


Solution 1:[1]

I face this issue, my solution is by using @media print {} css we can hide the unwanted styles, but after printing the contents are left aligned. Then by using jquery I set body width to 100%, now it works as expected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3671423

Related Questions