Flexbox wkhtmltopdf渲染问题

Ale*_*hel 4 html css wkhtmltopdf flexbox

我有一个页面,我正在变成一个带有wkhtmltopdf的pdf.我有一个3列布局,它在Chrome中运行良好,但pdf生成不正确.是否有一个替代flexbox可以提供相同的视图或方法使wctmltopdf中的flexbox工作?Modernizr没有帮助.谢谢.

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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

TAL*_*ama 8

wkhtmltopdf 使用旧版本的WebKit,因此您必须使用原始的Flexbox规范,它远不如强大,但仍然可以做一些相同的效果.

另请注意,您必须为许多属性添加前缀-webkit-.

  • 另见 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 和 http://stackoverflow.com/questions/26036663/page-break-after-not-working-in-flexboxes。我正在使用 css-next 并设置 `Chrome &gt;= 13` 对我有用。 (2认同)
  • 有人能告诉我为什么它使用旧版本的 WebKit 吗?我一直看到一切正常的原因就是因为这个,但没有人说为什么它是旧版本。 (2认同)