Javascript print in a new window won't display images -


i'am struggling problem , hoping can me. created function prints out data inputs in page. however, logo using on print page won't displayed if link image broken. thoughts?

here code:

function printreport() {     win=null;     var vin = $("input[name='vin']").val();     var make = $("select[name='make']").val();     var printdata = '<table width="960" border="0" align="center"> <tr> <td colspan="2"><img src="http://localhost/site/images/logo_print.png" width="291" height="109" /></td> </tr> <tr> <td colspan="2"><div class="print-title" align="center">service report </div></td> </tr> <tr> <td width="196">vin:</td> <td width="754"><b>'+ vin +'</b></td> </tr> <tr> <td>make:</td> <td><b>'+ make +'</b></td> </tr> </table>';     win = window.open();     self.focus();     win.document.open();     win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');     win.document.write("body, td { height: 25px; font-family: 'pt sans', sans-serif; font-size: 17px; color:#333333;} .logo{ background:url(http://localhost/clubdfrance/images/logo_print.png); background-repeat:no-repeat; display:block; width:291px; height:109px;} .print-title{ display:block; margin-top:10px; font-size: 25px; }");     win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');     win.document.write(printdata);     win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');     win.document.close();     win.print();     win.close(); 

here solution out there has problem. problem browsers. designed not print images in order save printers ink. walkaround problem using css media print , list-style-image.

css:

@media all{    printed-div{        display:none;    } }  @media print{    printed-div{        display:block;    }    .logo-print{        width:291px;        height:109px;        display: list-item;        list-style-image: url(../images/logo_print.png);        list-style-position: inside;    } } 

html

<div class="printed-div"></div> 

javascript

function printreport() {     $(".printed-div").html();     var vin = $("input[name='vin']").val();     var make = $("select[name='make']").val();     var printdata = '<table width="960" border="0" align="center"> <tr> <td colspan="2"><div class="logo-print"></div></td> </tr> <tr> <td colspan="2"><div align="center">report</div></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td width="260">vin:</td> <td width="700"><b>'+ vin +'</b></td> </tr> <tr> <td>make:</td> <td><b>'+ make +'</b></td> </tr> </table>';     $(".printed-div").append(printdata); } 

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo