3
votes

iText7 - La propriété de dépassement de texte CSS3 ne s'affiche pas lors de la conversion de HTML en PDF

Je joue avec iText7 comme projet de preuve de concept.

J'ai besoin de prouver qu'iText7 peut utiliser CSS3 et HTML5 comme ils le suggèrent sur leur site.

Cependant, je constate que lorsque je génère le pdf, les propriétés css3 sont perdues.

Voici le code .Net qui génère le fichier pdf.

<!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>

Voici le HTML que j'ai essayé de convertir en PDF: -

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;
            }
        }
    }
}

html css c# pdf itext7

4 commentaires

Ne respecte-t-il aucun CSS ou des propriétés spécifiques? Il y a beaucoup de CSS3 qui ne sont pas pris en charge par tous les navigateurs. Si les moteurs de rendu ne prennent pas en charge tout, il est difficile de s'attendre à ce qu'un moteur personnalisé le fasse également. (ils déclarent directement dans la documentation qu'ils n'utilisent pas quelque chose de traditionnel comme WebKit ou Gecko ...

ive a essayé quelques propriétés css3 différentes et aucune d'entre elles n'est rendue dans le pdf final.

Any CSS est-il rendu? par exemple font-weight: bold ou s'agit-il simplement de propriétés spécifiques? Si c'est juste quelques-uns, je contacterais leur support et demanderais quelle partie de la spécification CSS3 est autorisée (aucun navigateur n'implémente la spécification complète non plus)

Je pense que c'est la version Java qui prend en charge css3. iText7 est assez mauvais compte tenu de mes récents besoins en création de PDF.

3 Réponses :

0
votes

Il y a une propriété dans CSS -webkit-print-color-Adjust: exact; qui autorise la propriété CSS3 à l'impression. Essayez ceci, j'espère que cela vous aidera. Merci

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

3 commentaires

Qu'est-ce que cela a à voir avec la propriété css3 text-overflow?

Je ne suis pas sûr mais cela permettra à votre accessoire css3 d'être imprimé.

Les documents iText7 indiquent explicitement qu'ils n'utilisent pas de moteur de rendu de mise en page commun comme Webkit ou Gecko, donc cela n'aura aucun effet. @Derek c'est une astuce pour les navigateurs basés sur des kits web (Chrome, Safari, bientôt Edge) pour les amener à respecter les mises en page.

1
votes

Utilisez des propriétés alternatives au lieu d'un débordement de texte comme

overflow:hidden;white-space:nowrap;

0 commentaires

1
votes

Le PDF est censé être utilisé pour les documents imprimés, avec une mise en page précise. Ces propriétés ( text-overflow , text-ellipsis ) ne sont pas très pertinentes pour les documents à mise en page fixe, elles sont plus pertinentes pour les médias avec des dimensions variables, comme les écrans. Si vous créez un document avec du texte en ellipse, comment le lecteur devrait-il le lire sur papier?

Il n'est pas nécessaire d'implémenter ces fonctionnalités liées à l'écran dans le PDF.

0 commentaires