Question

我需要在自定义QWeb PDF报告中将文本旋转90度（以垂直方式显示）。

有人可以粘贴特定的CSS和HTML示例吗？

（Odoo 10）

由于

Answer 1

Hello usk70，

定义和用法
transform属性将2D或3D变换应用于元素。此属性允许您旋转，缩放，移动，倾斜等元素。

<强>语法
transform：none | transform-functions | initial | inherit;

属性值
rotate（angle）：定义2D旋转，角度在参数

中指定

例如，
我使用html和css3给出了示例，并在odoo 10 qweb pdf报告中尝试此代码。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
</style>
</head>
<body>

<div>Hello </div>
<br>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>

<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>

<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>

</body>
</html>

我希望我的回答很有帮助如果有任何疑问请评论。

Answer 2

以下是在Odoo 11中可用的示例：

<div style="transform: rotate(90deg); -webkit-transform: rotate(90deg);">Rotated Text</div>

我自己遇到了很多麻烦，因为transform: rotate(90deg);在预览中旋转了文本，但是却没有打印出来。除非带前缀（并且wkthmltopdf使用Webkit渲染引擎），否则Odoo 11中使用的wkhtmltopdf版本不支持此CSS属性。

如果这在Odoo 10或更早版本中不起作用，则需要查看是否可以将wkhtmltopdf更新或至少更新为支持该属性的版本。

在Odoo 10 QWeb PDF报告中旋转文本（90度 - 垂直旋转）

2 个答案: