在 wkhtmltopdf 中使用 Flex/CSS

Question

我已经在我的 HTML 页面上使用以下带有 flexbox 的答案成功创建了一个列表How to display 3 items per row in flexbox?

我需要用这些数据创建一个 PDF，我正在使用 wkhtmltopdf ( https://wkhtmltopdf.org/ )，它也可以正常工作，但是生成的 PDF 将我的所有列表项放在 1 个长列中，而不是每行 3 个。

看起来在生成 PDF 时没有处理 CSS，任何见解都值得赞赏。

Answer 1

这对我有用：

.row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row > div:last-child {
    margin-right: 0;
}

有关更多信息，请参阅https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522。

Answer 2

我使用以下方法解决了这个问题：

相当于display:flex;==>display: -webkit-box;

相当于justify-content: space-between;==>-webkit-box-pack: justify;

一些有用的信息来自： https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522

Answer 3

作为 Bootstrap 5 的修复，使用 wkhtmltopdf 0.12.*，我发现并完成了以下样式

            <style>
                /* Fix wkhtmltopdf compatibility with BS flex features */

                .row {
                    display: -webkit-box;
                    display: flex;
                    -webkit-box-pack: center;
                    justify-content: center;
                }

                .row>div {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }

                .row>div:last-child {
                    margin-right: 0;
                }


                /* Fix wkhtmltopdf compatibility with BS tables borders */


                /* Requires cellspacing="0" on table to prevent spacing */

                table {
                    border-collapse: separate !important;
                }

                th,
                td {
                    border-top: none;
                    border-left: none;
                    border-right: none;
                }

            </style>

当我从 bs 4 升级到 bs 5 时，源码救了我的命。