Image printing problem in google chrome


In this article we will look how to fix the image printing problem in Google chrome. Most of the developers complaint that there code snippet for printing content of any div works well in all browsers except chrome, they can see images being printed in all browsers but in Google chrome neither images shown in print preview nor printed. So for Google chrome the workaround is pretty simple, just you have to add the <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\> and that's it. How? Let’s have a look

Image printing problem in Google chrome


        function printcontent() {
            var docType = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"  \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
            var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
            disp_setting += "scrollbars=yes,width=800, height=800, left=50, top=25,_blank";
            if (navigator.appName != "Microsoft Internet Explorer")
                disp_setting = "";

            var content_vlue = document.getElementById("divContent").innerHTML;
            var docprint = window.open("", "", disp_setting);
            docprint.document.open();

            docprint.document.write(docType);
            docprint.document.write('<head><title></title>');

            docprint.document.write('</head><body style="padding:0;margin-top:0 !important;margin-bottom:0!important;"   onLoad="self.print();self.close();">');

            docprint.document.write(content_vlue);
            docprint.document.write('</body></html>');
            //document.write(doct + divContent.innerHTML);
            docprint.document.close();
            docprint.focus();
        }

<div id="divContent">
        <table width="100%" cellpadding="2" cellspacing="2">
            <tr>
                <td>
                    <img src="img/web_logo_new.jpg" alt="logo" /></td>
                <td>Some content will come here </td>
            </tr>

        </table>
    </div>
    <input type="button" value="Print" onclick="printcontent();" />

So that's it. Hopefully it will fix your problem of printing images in Google chrome.

0 comments: