Html2canvas: Les balles ne sont pas rendues

Créé le 17 mars 2013  ·  20Commentaires  ·  Source: niklasvh/html2canvas

Si j'ai une liste non ordonnée ou ordonnée dans mon balisage html, les puces ne sont pas rendues par html2canvas. Je pense que c'est un problème assez important car il s'agit d'une fonctionnalité standard de HTML prise en charge dans tous les navigateurs depuis longtemps.

Feature

Commentaire le plus utile

Une astuce simple :

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

SCSS
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

Tous les 20 commentaires

La solution devrait en théorie être assez simple (c'est juste un cercle), mais quelle que soit la solution, il faudrait considérer le CSS pour personnaliser l'apparence des balles. Sans parler des éléments de liste sont couramment utilisés pour des choses qui ne ressemblent même pas à des listes (par exemple, l'en-tête github qui a "Code", "Network", etc. est un ul, donc évidemment aucune puce n'est nécessaire à cause de list- type de style : aucun

http://www.w3schools.com/css/css_list.asp

Des nouvelles de celui-ci ? J'ai vraiment besoin de cette fonctionnalité dans mon application. Quelqu'un a-t-il des idées/solutions de contournement à ce sujet ? Ou quelqu'un peut-il me donner des informations sur la façon de le mettre en œuvre?

Voici le violon qui prouve qu'il ne fonctionne pas : http://jsfiddle.net/fYZ5h/

J'adorerais voir cela corrigé, en particulier pour les listes ordonnées.

Edit: Il existe une solution de contournement simple pour les personnes simplement intéressées à voir les chiffres par rapport à une liste ordonnée. Cela fonctionnera tant que vous définissez la propriété CSS 'list-style-position' sur 'inside' sur votre élément 'ol'. De plus, votre 'list-style-type' doit correspondre à l'expression régulière suivante :

/^(décimal|décimal-premier-zéro|supérieur-alpha|supérieur-latin|supérieur-romain|inférieur-alpha|inférieur-grec|inférieur-latin|inférieur-romain)$/i

... tant que ces deux contraintes sont respectées, les nombres sont rendus correctement pour la liste ordonnée. Vous pouvez utiliser CSS pour ajuster la position de la liste afin de compenser tout impact de la 'list-style-position: inside;' a sur votre mise en page.

J'ai fait une solution de contournement pour le carré de type liste.

Peut-être que mes solutions vous aident.

Demande de tirage : https://github.com/niklasvh/html2canvas/pull/417

+1 pour avoir la possibilité de rendre des puces dans des listes non ordonnées...

Ce serait aussi incroyablement utile pour les projets sur lesquels je travaille. Je dois convertir mes listes en paragraphes et simuler les puces.

Je pense que même une solution provisoire qui ignore les styles de liste plus compliqués et implémente uniquement un disque/carré pour les listes non ordonnées serait utile. essayé l'approche de @adam-roth, mais le fera sous peu). ALORS, peut-être passer aux styles de liste les plus sophistiqués...

Ce ne sera pas une solution qui fonctionnera pour tout le monde, mais voici quelque chose que j'ai utilisé avec un certain succès. Html2Canvas prend très bien en charge les sélecteurs de pseudo-classes, j'ai donc rajouté les puces et les nombres avec les filtres : avant.

// Ce code est SASS, mais vous pouvez l'écrire très bien en css ordinaire.
//Vous pouvez également imbriquer ol, ul pour autoriser les listes imbriquées (spécifiez simplement une nouvelle position à gauche avec laquelle indenter, dans notre cas, nous ajoutons simplement 30 pixels supplémentaires par indentation).

#whatever-element-html2canvas-is-run-on {
    ol, ul {
        li {
            &:before {
                position: absolute; //This way is doesn't effect sizing
                left: 30px; //Whatever indent level you need to match the bullet placement
                z-index: 1000; //This may not be necessary for you
            }
        }
    }
    ol {
        li {
            &:before {
                content: attr(data-number); //This along with the javascrip below will make ordered lists work.
            }
        }
    }
}

Ensuite, je lance n'importe quel html que je veux rendre à travers un filtre (dans mon cas, un filtre angulaire, mais n'importe quel Javascript fonctionnerait)

var filtered = $("<div>" + data + "</div");

//Add Numbers To Each of The OL Li's
filtered.find('ol')
    //Loop through each ol
    .each(function(i, el){
        console.log('i', i);
        $(el).children('li')
            //Loop through each of it's children and give it a data attribute for what number it should have
            .each(function(ci, cel){
                console.log('ci', ci);
                $(cel).attr('data-number', ci + 1);
            });
    });

La solution de contournement que j'ai publiée plus tôt ne fonctionne plus avec la version actuelle de html2canvas. Voici ma nouvelle solution de contournement pour ce problème :

http://jsfiddle.net/e70o3mj0/2/

... fondamentalement, il convertit chaque 'ol' et 'ul' en une collection de div. L'opération peut être annulée après l'exécution de html2canvas.

Je suis juste curieux de savoir si cela est envisagé ou s'il y a quelque chose que je puisse faire pour aider à faire avancer cette fonctionnalité.

Il est envisagé et sera mis en œuvre à un moment donné. Le PR #486 était fait pour ça, et j'ai donné quelques retours dessus. Une fois ceux-ci résolus, il pourrait être fusionné.

Y a-t-il des chances que cela soit résolu dans html2canvas dans un avenir proche ?

J'ai cherché "ul", "ol", "li" dans le code et je n'ai rien trouvé, mais les li sont en retrait, il doit donc y avoir une certaine logique pour cela. Quelqu'un pourrait-il indiquer où cela se trouverait dans le code, si c'est le cas maintenant?

C'est un hack à coup sûr, mais j'ai pu prendre en charge un <ul> à puces dans le PDF avec cette approche :

HTML
~~~

  • Remplacez votre revenu par un {{ output.monthlyIncome | devise }} chèque mensuel
  • Remboursez votre prêt hypothécaire à zéro
  • Remboursez votre dette à zéro
  • Payez 100 % des études de vos enfants dans un collège ou une université publique
  • Restez couvert jusqu'à ce que votre conjoint/partenaire ait 65 ans ou que votre plus jeune enfant ait 23 ans, selon la première éventualité

~~~

MOINS/CSS
~~~

pdf-toile ul {

list-style: none;
padding: 0;

}

pdf-toile ul li {

margin: 0 0 0 35px;
list-style: none;

.bullet {
    display: inline-block;
    opacity: 0.85;
    font-size: 1.1em;
    text-indent: -22px;
}

}
~~~

#pdf-canvas est le nom d'un DIV masqué contenant le modèle PDF. J'espère que cela aidera quelqu'un d'autre à essayer de le faire.

J'utilise TinyMCE pour l'édition, et les utilisateurs ne doivent voir aucun des "fonctionnements internes", mais il pourrait y avoir un moyen d'étendre pour qu'un span et • soit inséré, mais une solution 1 à 1 appropriée serait bien meilleure bien sûr.

Merci,
Anders

Une astuce simple :

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

SCSS
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

Je me demande cependant, pourquoi cela ne peut-il pas être résolu dans html2canvas?

Mon approche pour contourner cela consistait à créer un tableau avec 2 colonnes et • à mettre dans la première colonne et le texte dans la seconde. C'était la seule façon qu'il soit rendu correctement

J'ai testé en ce moment, et les listes HTML fonctionnent bien dans 1.0.0 alpha 10.

https://jsfiddle.net/boLxkgj8/264/ Je ne peux pas rendre Bullet :( Comment pourriez-vous faire cela

https://jsfiddle.net/boLxkgj8/264/ Je ne peux pas rendre Bullet :( Comment pourriez-vous faire cela

ok, vous n'utilisiez pas la dernière version, maintenant il semble que cela fonctionne :
https://jsfiddle.net/jeavhg05/4/

Cette page vous a été utile?
0 / 5 - 0 notes