在新窗口中打印Javascript将无法显示图像 [英] Javascript print in a new window won't display images

问题描述

我正在努力解决问题，我希望你能帮助我。我创建了一个从页面输入中打印出数据的函数。但是，我在打印页面上使用的徽标将不会像显示图像链接那样显示。有什么想法？

I'am struggling with a problem and I was hoping you can help me. I created a function that prints out data from inputs in a page. However, logo I am using on a print page won't be displayed like as if a link to the image is broken. Any thoughts?

以下是代码：

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媒体打印和 list-style-image 。

Here is the solution for everyone out there who has this problem. Problem is with the browsers. They are designed not to print images like this in order to save printers ink. Walkaround for this problem is using CSS media print and 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

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

这篇关于在新窗口中打印Javascript将无法显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！