iText7 - 将 HTML 转换为 PDF 时未呈现 CSS3 文本溢出属性答案

【问题标题】：iText7 - CSS3 text-overflow property not rendering when converting HTML to PDFiText7 - 将 HTML 转换为 PDF 时未呈现 CSS3 文本溢出属性
【发布时间】：2019-08-26 12:00:45
【问题描述】：

我正在使用 iText7 作为概念验证项目。

我需要证明 iText7 可以使用他们网站上建议的 CSS3 和 HTML5。

但是，我发现当我生成 pdf 时，css3 属性丢失了。

下面是生成pdf文件的.Net代码。

public class HtmlToPdfService : IHtmlToPdfService
    {
        public async Task CreatePdfFromHtmlFileStreamAsync(IFormFile file)
        {
            try
            {
                if (file == null)
                {
                    throw new ArgumentException("file cannot be null or empty.");
                }

                var filename = $"{Path.GetFileNameWithoutExtension(file.FileName)}.pdf";

                var stream = new MemoryStream();

                var html = string.Empty;
                using (var reader = new StreamReader(file.OpenReadStream()))
                {
                    var converterProperties = new ConverterProperties();

                    html = reader.ReadToEnd();

                    using (var pdfWriter = new PdfWriter(stream))
                    {
                        pdfWriter.SetCloseStream(false);
                        HtmlConverter.ConvertToPdf(html, pdfWriter, converterProperties);
                    }
                }

                stream.Position = 0;


                using (var fileStream = new FileStream(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot/pdf", filename), FileMode.OpenOrCreate, FileAccess.ReadWrite, FileShare.None))
                {
                    await stream.CopyToAsync(fileStream);
                }

            }
            catch (Exception x)
            {
                throw x;
            }
        }
    }
}

这是我尝试转换为 PDF 的 HTML：-

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
     p {
        width: 200px;
        border: 1px solid;
        padding: 2px 5px;

        /* BOTH of the following are required for text-overflow */
        white-space: nowrap;
        overflow: hidden;
    }

    .overflow-visible {
        white-space: initial;
    }

    .overflow-clip {
        text-overflow: clip;
    }

    .overflow-ellipsis {
        text-overflow: ellipsis;
    }

    .overflow-string {
    /* Not supported in most browsers, 
        see the 'Browser compatibility' section below */
        text-overflow: " [..]"; 
    }
</style>
</head>
    <body>
            <p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </body>
</html>

【问题讨论】：

它不尊重任何 CSS 或特定属性吗？ 有很多 CSS3 不是所有浏览器都支持的。如果渲染引擎不支持所有内容，那么很难期望自定义引擎也支持。（他们在文档中声明他们不使用传统的东西，如 WebKit 或 Gecko...
我尝试了几个不同的 css3 属性，但没有一个在最终的 pdf 中呈现。
Any CSS 渲染吗？例如font-weight: bold 还是只是特定属性？如果只是一些，我会联系他们的支持并询问 CSS3 规范的哪一部分是允许的（也没有浏览器实现完整的规范）
我认为是支持css3的Java版本。从我最近对 PDF 制作者的需求来看，iText7 非常糟糕。

标签： c# html css pdf itext7

【解决方案1】：

PDF 应该用于具有精确页面布局的类似打印的文档。这些属性（text-overflow、text-ellipsis）与固定布局的文档不太相关，它们与可变尺寸的媒体（如屏幕）更相关。如果你创建一个文档，其中一些文本被省略了，读者应该如何在纸上阅读它？

在 PDF 中实现这些与屏幕相关的功能没有太大必要。

【讨论】：

【解决方案2】：

使用替代属性而不是像文本溢出一样

overflow:hidden;white-space:nowrap;

【讨论】：

【解决方案3】：

CSS -webkit-print-color-adjust: exact; 中有一个属性允许打印 CSS3 属性。试试这个，希望能帮到你。谢谢

body {
  -webkit-print-color-adjust: exact;
}

【讨论】：

这与 text-overflow css3 属性有什么关系？
我不确定，但这会让你的 css3 道具打印出来。
iText7 文档明确声明他们不使用像 Webkit 或 Gecko 这样的通用布局渲染引擎，因此这将无效。 @Derek 对于基于 webkit 的浏览器（Chrome、Safari、即将推出的 Edge）来说，这是一个让它们尊重打印布局的技巧。