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

时间:2019-04-04 16:25:51

标签: c# html css pdf itext7

我正在使用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>

3 个答案:

答案 0 :(得分:1)

PDF应该用于具有精确页面布局的打印文档。这些属性(text-overflowtext-ellipsis)与固定版式文档不太相关,它们与尺寸可变的介质(如屏幕)更相关。如果您创建的文档中带有一些省略号的文本,那么读者应该如何在纸上阅读它?

不需要在PDF中实现这些与屏幕相关的功能。

答案 1 :(得分:0)

CSS -webkit-print-color-adjust: exact;中有一个属性,该属性允许打印CSS3属性。试试这个,希望对您有所帮助。谢谢

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

答案 2 :(得分:0)

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

overflow:hidden;white-space:nowrap;