Question

我遇到了使用PhantomJS和phantom将网页呈现为PDF的问题。

我注意到的是，虽然SVG和JPG“完全”加载到生成的PDF中，但PNG图像不会，，但仅限于它们首次出现在文档中。换句话说，第一个图像部分褪色，然后后续图像根本不褪色。

我检查了onResourceLoaded回调，图片从服务器正确加载。我尝试过交换http和https，看看是否有所作为。尝试从本地静态文件夹加载以查看它是否是网络延迟。我已经尝试将page.render包裹在setTimeout中（正如许多人在其他问题中建议的那样）无济于事。

这是一个已知问题吗？有没有更好的解决方法来解决淡出的PNG？不幸的是，在这个项目中，我无法控制进入我的图像类型。

Answer 1

我遇到了完全相同的问题，并意外地发现在所有元素上强制使用边框颜色可以解决问题。在我的例子中，受影响/褪色的元素是图像（jpg）和图表。

所以，像

* {
    border-color: black !important;
}

Answer 2

JPG也出现此问题。我遇到了使用 PhantomJS （通过 html-pdf 软件包）和 wkhtmltopdf 都将HTML文件转换为PDF的问题。

使用PhantomJS时，我注意到该问题与在其他元素的边框中使用rgba()使用透明颜色有关。我只是将这些透明颜色替换为十六进制代码，而透明性问题就消失了。

简而言之，删除任何rgba()表达式，尤其是使用透明性的情况。