Flexbox 使用部分？在 iTextPDF 中有效

如何解决Flexbox 使用部分？在 iTextPDF 中有效

我正在使用 ITextPDF 创建报告。由于报告将是一个非常复杂的报告，我想使用我正在创建的 HTML 模板来创建 pdf。但是当涉及到 flex-Box 时，它只能部分起作用。

部分的意思是，当我使用下面的代码时；

private string HTML = $@"
<!DOCTYPE html>
<html lang=""tr"">
<head>
    <Meta charset = ""UTF-8"">
    <Meta http-equiv=""X-UA-Compatible"" content=""IE=edge"">
    <Meta name = ""viewport"" content=""width=device-width,initial-scale=1.0"">
    <title>Print</title>
    <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"">
</head>
<body>
    <div class=""d-flex align-items-center justify-content-center bg-primary"">
        <div>abcçde</div>
        <div>ABCÇDEF</div>
    </div>
</body>
</html>
";
public void GeneratePDF()
{
    using(var memoryStream = new MemoryStream())
    {
        using (var pdfWriter = new PdfWriter(Guid.NewGuid().ToString()+".pdf"))
        {
            pdfWriter.SetCloseStream(false);
            HtmlConverter.ConvertToPdf(this.HTML,pdfWriter);
            var pdfStream = pdfWriter.GetoutputStream();
            pdfStream.Position = 0;
            pdfStream.copyTo(memoryStream);
            var result = memoryStream.ToArray();
            pdfStream.dispose();
        }
    }
}

justify-content-center 在点上工作，如下所示；

但是当我将其更改为 justify-content-between 时它不起作用；

我还尝试给每个 div float 值，而不添加 bootstrap.min.css，但它也不能那样工作。

为什么它适用于 justify-content-center 而不是 justify-content-between？

解决方法

正如在一个问题的评论中提到的，目前 iText 仅提供初始 flex 支持。指定 justify-content-between 类实际上意味着设置 justify-content:space-between，并且不支持该值：您可以从处理此类 html 时抛出的日志消息中看到它：

com.itextpdf.html2pdf.css.apply.util.FlexApplierUtil WARN Flex related property justify-content: space-between is not supported yet.

作为一种解决方法，确实可以使用浮点数。例如，如下html的div按预期处理：

<!DOCTYPE html>
<html lang="tr">
 <body>
  <div>
   <div style="float: left;">abcçde</div>
   <div style="float: right">ABCÇDEF</div>
  </div>
 </body>
</html>