gpt4 book ai didi

在新窗口中的 Javascript 打印不会显示图像

转载 作者:行者123 更新时间:2023-11-29 22:10:30 24 4
gpt4 key购买 nike

我正在努力解决一个问题,我希望你能帮助我。我创建了一个函数,可以从页面中的输入中打印出数据。但是,我在打印页面上使用的 Logo 不会显示,就像图像链接已损坏一样。有什么想法吗?

代码如下:

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

关于在新窗口中的 Javascript 打印不会显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18310324/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com