PNG使用PhantomJS和节点幻影模块进行半渲染

Question

我在使用PhantomJS和phantom将网页渲染为PDF时遇到了一个问题。

我注意到的是，虽然SVG和JPG"完全"加载到生成的PDF中，但PNG图像不会，，而是仅在文档中首次出现时。换言之，第一个图像被部分褪色，然后随后的图像根本不褪色。

我已经检查了onResourceLoaded回调，并且从服务器正确加载了图像。我试过交换http和https，看看这是否有什么不同。尝试从本地静态文件夹加载，以查看是否是网络延迟。我尝试过用setTimeout包装page.render（正如许多人在其他问题中对SO的建议一样），但没有成功。

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

Answer 1

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

所以，类似的东西

* {
    border-color: black !important;
}

Answer 2

JPG也会出现此问题。我在使用PhantomJS（通过HTML-PDF包）和wkhtmltopdf

对于PhantomJS，我注意到这个问题与在其他元素的边界中使用rgba()的透明颜色有关。我只是用HEX代码替换了那些透明的颜色，透明度问题就消失了。

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