Question

我是Web开发人员，几乎从未使用过设计，但我已经遇到了这个我正在努力纠正的错误。

当我打印/显示打印预览页面时，某些图像会正确显示，但有些图像却没有。我可以看到的关键区别是，未出现的图像是带有图像的跨度标记，而工作图像使用img标记。

以下是html的例子：

带有“icon”出生的跨度显示：

<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>

在某些浏览器中，它在预览中看起来没问题但是没有打印，在其他浏览器中它没有打印但仍然无法打印。

提前谢谢！

Answer 1

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

问题是浏览器没有等到CSS背景中指定的图像被下载。

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

最后，我使用HTML img标签在我的页面上嵌入图像，使用jQuery在下载最后一张图片时触发打印对话框。

Answer 2

您需要在打印前放置延迟。 chrome中有一个原生bug。代码如下： -

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

Answer 3

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

在打印中，图像的宽度设置为0，导致问题。

Answer 4

制作打印样式表，将跨度设置为display：block

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

4 个答案: