在PhantomJS中将旋转的文本渲染为PDF [英] Rendering rotated text to PDF in PhantomJS

问题描述

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

I have a HTML page, which contains several pieces of text that are rotated using the following piece of CSS:

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

当我直接在浏览器中上拉页面时，这将按预期方式呈现.当我通过PhantomJS渲染页面时，它似乎忽略了旋转.

When I pull up the page directly in the browser this renders as expected. When I render the page through PhantomJS, it seems to ignore the rotation.

我已升级到Phantom 2.0.0，但仍然是同一问题.

I upgraded to Phantom 2.0.0, but still the same issue.

有什么办法可以使这项工作成功吗?

Is there any way to make this work?

推荐答案

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

I tested it with PhantomJS 1.9.18 in a node application.

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

With -webkit-transform and -webkit-transform-origin the text on the generated PDF is rotated. Withouth the -webkit prefixes its only rotated when I view it with a browser, not rendered in the pdf.

所以您应该将CSS更改为

So you should change your CSS to

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

这篇关于在PhantomJS中将旋转的文本渲染为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！