在IE/Chrome/Firefox中打印预览（或打印）时图像未显示。

Question

我是一名Web开发人员，几乎不涉及设计，但我被分配了这个bug，我正在努力解决。

当我打印/显示打印预览页面时，有些图像会正确显示，而另一些则不会。我能看到的关键区别是不显示的图像是使用css中应用的span标签，而工作正常的图片使用img标签。

以下是html示例：

带有“icon”出生标记的span标签无法显示：

<li class="media">
    <div class="img">
        <div class="h2 mtm">1889</div>
        <span class="timeline-icon icon-birth"></span>
    </div>
    <div class="bd">
        <h3 class="profile-subtitle mts">Born in ?</h3>
        <p class="deemphasis mbn">
        <a href="/search/results/bmdindexedbirths/bibby/elizabeth%20?yearofbirth=1889">Search     for Birth Record</a>
        </p>
    </div>
</li>

Image.gif 确实 可以显示:

<li class="media">
    <div class="img">
        <div class="h6">
            <strong>Spouse</strong></div>
            <img src="image.gif" alt="" class="person-thumb dropshadow" />
        </div>
    <div class="bd">
        <p class="mbn">Husband</p>
        <h3 class="profile-subtitle">
            <a href="path">Thomas&nbsp;<strong>Name</strong></a>
        </h3>
        <p class="mbn">?&#45;?</p>
    </div>
</li>

在某些浏览器中，预览时看起来没问题，但无法打印；而在其他浏览器中，则一直存在无法打印的问题。

提前感谢您！

- IntoTheBlue

---

图片没有打印出来，因为它们是背景图片，浏览器设置为不打印这些内容。在某些浏览器中可以手动更改此设置。解决方案是使用HTML img标签而不是span。 - IntoTheBlue

Answer 1

我在两个月前也遇到了同样的问题。我有一个按钮，可以将用户重定向到打印友好页面，然后使用Javascript触发打印对话框。

问题是浏览器不会等待CSS背景中指定的图片下载完成。

我在触发打印对话框之前设置了延时，以给浏览器时间下载图片。但这种方法并不可靠，因为没有人拥有恒定的下载速度，并且它会在图片被下载到具有非常慢的互联网连接的用户之前打开打印对话框。

最终，我使用HTML img标签将图像嵌入到我的页面中，并使用jQuery在最后一张图像下载完成时触发打印对话框。

- DavidRH

---

事实证明，在我的情况下，图像没有显示出来，因为浏览器默认不打印背景图像。这在某些浏览器中可以手动设置，但并非所有浏览器都支持。解决方案是使用HTML img标签。 - IntoTheBlue

Answer 2

在打印之前，您需要设置延迟。Chrome浏览器存在本地错误。代码如下：

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}

- Anand Deep Singh

Answer 3

只需添加以下样式即可使其正常工作 img{max-width:100%;height:auto;}

在打印时将图像宽度设置为0导致了这个问题。

- Venkatesh Gaurav

Answer 4

创建一个打印样式表，将您的span设置为display:block。

- albert