Odoo QWeb - 创建 pdf 报告时 Flexbox 不起作用

编程问答 2022-04-22

问题描述

当以下代码在 HTML 中使用并使用浏览器打开时，弹性框效果就是我想要的。但是当我在QWeb中使用相同的代码时，输​​出是不同的（flex div没有分成两部分）。

<div style="display: flex;">
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>

浏览器

enter image description here

PDF 报告

enter image description here

解决方法

问题不是qweb而是wkhtmltopdf。您可以尝试 Using Flex/CSS with wkhtmltopdf

中提到的 webkit-box 
<div style="display: flex; display: -webkit-box; -webkit-box-pack: center; justify-content: center;">
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; margin-right: 0;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>
flexboxodooqweb