Flexbox wkhtmltopdf渲染问题 [英] Flexbox wkhtmltopdf Rendering Issue

问题描述

我有一个页面，我正在用wkhtmltopdf转换为pdf.我有3列的布局，它在Chrome中效果很好，但pdf生成错误.flexbox是否有替代方法可以提供相同的视图或使flexbox在wkhtmltopdf中工作?Modernizr没有帮助.谢谢.

I have a page that I am turning into a pdf with wkhtmltopdf. I have a 3 column layout and it works well in Chrome but the pdf is incorrectly generated. Is there an alternative to flexbox that would give the same view or a way to make flexbox work in wkhtmltopdf? Modernizr did not help. Thanks.

HTML:

<div class="header">
  <div id="name" class="center">
    <h2>
      Centered Text
    </h2>
  </div>
  <div id="links" class="left">
    <h3>
    Left Line 1
    <br>
    Left Line 2
    </h3>
  </div>
  <div id="contact" class="right">
    <h3>
    Right Line 1
    <br>
    Right Line 2
    </h3>
  </div>
</div>
</div class="clear"></div>

CSS:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.center {
  order: 2;
  text-align: center;
}

.left {
  order: 1;
  float: left;
  text-align: left;
}

.right {
  order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  flex-basis: 0;
  order: 1;
}

.clear {
  clear: both;
}

推荐答案

wkhtmltopdf 原始的Flexbox规格，功能远不及它强大，但仍然可以实现相同的效果.

wkhtmltopdf uses an old version of WebKit and so you must use the original Flexbox spec, which is nowhere near as powerful but can still do some of the same effects.

另外，请注意，您还必须在 -webkit-前面添加很多属性的前缀.

Note, also, that you'll have to prefix lots of properties with -webkit-.

这篇关于Flexbox wkhtmltopdf渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！