在新窗口中打印Javascript赢得't显示图像

Javascript print in a new window won't display images

本文关键字：显示 图像 显示图 赢得 Javascript 新窗口 窗口 打印      更新时间：2023-09-26

我遇到了一个问题，希望你能帮我。我创建了一个函数，可以打印页面中输入的数据。然而，我在打印页面上使用的徽标不会像图像链接断开一样显示。有什么想法吗？

这是代码：

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

以下是针对所有有此问题的人的解决方案。问题出在浏览器上。为了节省打印机的墨水，它们被设计成不打印这样的图像。解决此问题的方法是使用CSS媒体打印和列表样式图像。

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

我知道你的答案已经太迟了，但它可能会帮助其他正在寻找答案的人。

之前-

win.print();

放在代码下方。

 $(win).load(function(){
        
});
相关文章：