将 Flex/CSS 与 wkhtmltopdf 一起使用答案

【问题标题】：Using Flex/CSS with wkhtmltopdf将 Flex/CSS 与 wkhtmltopdf 一起使用
【发布时间】：2019-11-23 00:44:10
【问题描述】：

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

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

在生成 PDF 时，似乎没有处理 CSS 任何见解。

【问题讨论】：

标签： html css pdf

【解决方案1】：

尝试减小弹性列的宽度。例如，当我尝试制作 50/50 列时，我必须将宽度设置为 49.8% 而不是 50%。希望对您有所帮助。

【讨论】：

【解决方案2】：

这对我有用：

.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。

【讨论】：

好电话！ webkit-box 是我无法弄清楚的缺失组件。
这对我也有用！
虽然这是一个解决方案，但到目前为止还不是解决方案。 webkit-box 甚至不接近 flex。希望 wkhtmltopdf 尽快接受 flex，但我真的对此表示怀疑，因为 flex 自 2013 年以来就已经退出了 :(

【解决方案3】：

我在我的应用程序中使用了 autoprefixer 来自动添加前缀。您只需将browsersList 更新为ie >= 9。

【讨论】：

【解决方案4】：

要在转换为 pdf 时使用 flex 或 box，您需要 webkit 示例：-

display: flex;
display: -webkit-flex;

对于 justify-content 和 align 您必须使用的项目

-webkit-align-self: flex-end;
 align-self: flex-end;
webkit-justify-content: space-between;
justify-content: space-between;

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：