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

Posted 2023-03-06

【中文标题】在 IE/Chrome/Firefox 中打印预览（或打印）时不显示图像

【英文标题】：Images not displaying when Print Preview (Or Print) in IE/Chrome/Firefox

【发布时间】：2012-09-13 02:40:51

【问题描述】：

我是 Web 开发人员，几乎从不从事设计工作，但遇到了这个我正在努力纠正的错误。

当我打印/显示打印预览页面时，某些图像显示正确，但其他图像却没有。我可以看到的主要区别是，没有出现的图像是跨度标签，图像应用在 css 中，而工作图像使用 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"  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>

在某些浏览器中，它在预览中看起来不错，但无法打印，在其他浏览器中却没有，而且仍然无法打印。

提前谢谢你！

【问题讨论】：

图像未打印，因为它们是背景图像，并且浏览器设置为不打印这些图像。这可以在某些浏览器中手动更改。解决方案是使用 html img 标签而不是 span。

【参考方案1】：

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

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

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

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

【讨论】：

原来在我的情况下图像没有显示，因为浏览器默认是不打印背景图像。这可以在某些浏览器中手动设置，但不是全部。解决方案是使用 HTML img 标签。

【参考方案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;

【参考方案3】：

只需添加以下样式即可使其工作 imgmax-width:100%;height:auto;

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

【参考方案4】：

制作打印样式表，将 span 设置为 display:block