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> </td> <td> </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); }