Flexbox 部分使用(?)在 iTextPDF 中有效
Flexbox Usage Partially(?) Works In iTextPDF
我正在使用 ITextPDF 创建报告。由于报告将是一份非常复杂的报告,我想使用我正在创建的 HTML 模板来创建 pdf。但是当涉及到 flex-box 时,它只是部分起作用。
我的意思是 partially 是,当我使用下面的代码时;
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
class 实际上意味着设置 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>
另外flex-direction:列不起作用
我正在使用 ITextPDF 创建报告。由于报告将是一份非常复杂的报告,我想使用我正在创建的 HTML 模板来创建 pdf。但是当涉及到 flex-box 时,它只是部分起作用。
我的意思是 partially 是,当我使用下面的代码时;
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
class 实际上意味着设置 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>
另外flex-direction:列不起作用