在打印介质中加载外部图像

仅当打印页面时，标题的右侧应该有图像。我宣布以下样式：在打印介质中加载外部图像

@media print { 
    h1::after { 
    content: url(IMAGE_URL_HERE); 
    position: absolute; 
    top: 0; 
    right: 0; 
    } 
}

的问题是，图像不会出现在（任何浏览器）打印预览。但是，如果我打印预览对话框关闭并重新打开，则图像将显示得很好。

你可以尝试重现它youself：http://jsbin.com/gevefivi

有什么我做错了或者是预期的行为？

更新：我认为它与引擎的打印布局渲染内部的竞态条件有关，因为当我引用本地图像时，它总是显示在打印预览中并且打印得很好。

UPDATE：貌似打印引擎真的外部资源之前content: url()不等待加载，但生成的PDF文件进行预览，这就是为什么没有像那里，如果图像的获取需要一定的时间来完成。但它确实发送HTTP请求并将其保存到本地以供下次使用。所以这就解释了为什么当打印预览第二次打开时它通常工作正常。

我与以下PHP文件作为外部资源测试了它：

<?php 

sleep(5); 

// Create a blank image and add some text 
$im = imagecreatetruecolor(120, 20); 
$text_color = imagecolorallocate($im, 233, 14, 91); 
imagestring($im, 1, 5, 5, 'A Simple Text String', $text_color); 

// Set the content type header - in this case image/jpeg 
header('Content-Type: image/jpeg'); 
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache"); 

// Output the image 
imagejpeg($im); 

// Free up memory 
imagedestroy($im);

它仅在5秒内返回一个图像。要重现此问题，请确保上面的PHP文件位于本地服务器上，或者最糟糕的情况是位于本地网络中。请参阅content: url()并打开“打印预览”对话框。你不会看到图像。关闭对话框。打开对话框，你仍然看不到图像。等待2-3秒。打开它，你会看到图像被提取和缓存。如果您删除了sleep(5);行，您应该在第一次打开“打印预览”对话框时看到图像。

仍然渴望知道这是一个错误还是这是一个预期的行为，以及目前是否有工作解决方案。

来源

2014-07-10 Sergey Lukin

嗯，我认为它应该被认为是明智的，当需要才浏览器无法加载图像...至于你的问题的解决方法，你可以简单地“预加载”的通过将它作为某些元素的背景（可能是尺寸为1x1px或canvas的背景）放置在普通屏幕样式表中 - 以便在调用打印预览时它已经在缓存中。 – CBroe

当然，但我更愿意加载尽可能少的资源。这不是一个选项。无论如何感谢您的回复。 Btw浏览器不会加载图像（请参阅我的问题更新），它只是不等待它们在生成最终打印版本之前完全加载。 –

经过数小时的实验后，我得出结论，截至今天，Web浏览器只是不等待打印特定样式表中指定的任何外部资源在呈现打印就绪文档之前完全下载。

因此，似乎在打印版本的页面中显示外部资源的唯一方法是在用户决定打印之前至少下载它们（通过html标记，屏幕样式表或JavaScript，其实并不重要）该页面。

而且，不，似乎这不是一个错误，而是当前主要供应商接受的标准。

来源

2014-07-10 23:53:36

好点OP，我是在同样的情况，我发现了一个窍门通过CSS预装图像：因为我每次加载图像这是不是最好的办法：如果我把你的代码/

：

print.css

.h1:before { 
     content: url(IMAGE_URL_HERE); 
}

屏幕。CSS

h1 { 
     background: url(IMAGE_URL_HERE) no-repeat -9999px -9999px; 
     //img not displayed but loaded 
}

问候

来源

2014-09-26 13:21:53

在打印介质中加载外部图像

回答

相关问题