在PhantomJS中将旋转的文本渲染为PDF

Question

我有一个HTML页面，其中包含使用以下CSS旋转的几段文本：

.rotate {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}

当我直接在浏览器中提取页面时，会按预期呈现。当我通过PhantomJS渲染页面时，它似乎忽略了旋转。

我升级到Phantom 2.0.0，但问题仍然存在。

有没有办法让这项工作？

Answer 1

我在节点应用程序中使用PhantomJS 1.9.18进行了测试。

使用-webkit-transform和-webkit-transform-origin生成的PDF上的文字会旋转。 Withouth -webkit前缀只有在我用浏览器查看它时才会旋转，而不是在pdf中呈现。

所以你应该把你的CSS改成

.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

Answer 2

Phantom JS基于Webkit。对于不兼容的css规则，您需要使用-webkit-前缀。

.rotate {
    -webkit-transform: rotate(90deg);   
    -webkit-transform-origin: 50% 50%;   
}