Javascript在新窗口打印不會顯示圖像

Question

我正在努力解決問題，我希望你能幫助我。我創建了一個函數，用於輸出頁面中輸入的數據。但是，我在打印頁面上使用的徽標不會顯示，就好像指向圖像的鏈接已損壞。有什麼想法嗎？

下面是代碼：

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(); 

Answer 1

下面是爲大家在那裏誰擁有這個問題的解決方案。問題在於瀏覽器。它們被設計成不打印這樣的圖像以節省打印機墨水。針對此問題的解決方法是使用CSS媒體打印和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); 
}