En teoría, la solución debería ser bastante simple (es solo un círculo), pero cualquiera que sea la solución, tendría que considerar el CSS para personalizar la apariencia de las viñetas. Sin mencionar que los elementos de la lista se usan comúnmente para cosas que ni siquiera parecen listas (por ejemplo, el encabezado github que tiene "Código", "Red", etc. es un ul, por lo que obviamente no se necesitan viñetas allí debido a la lista- tipo de estilo: ninguno

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

¿Alguna noticia sobre este? Realmente necesito esta funcionalidad en mi aplicación. ¿Alguien tiene alguna idea / solución al respecto? ¿O alguien puede darme información sobre cómo implementarlo?

Aquí está el violín que prueba que no funciona: http://jsfiddle.net/fYZ5h/

Me encantaría ver esto arreglado, especialmente para listas ordenadas.

Editar: hay una solución alternativa simple para las personas interesadas en ver los números en una lista ordenada. Esto funcionará siempre que establezca la propiedad CSS 'list-style-position' en 'inside' en su elemento 'ol'. Además, su 'tipo de estilo de lista' debe coincidir con la siguiente expresión regular:

/ ^ (decimal | cero inicial decimal | alfa-superior | latín-superior | romano-superior | alfa-inferior | griego-inferior | latín-inferior | romano-inferior) $ / i

... siempre que se cumplan ambas restricciones, los números se representan correctamente para la lista ordenada. Puede usar CSS para ajustar la posición de la lista para compensar cualquier impacto de la 'posición de estilo de lista: adentro;' tiene en su diseño.

Hice una solución para el cuadrado de tipo de estilo de lista.

Quizás mis soluciones te ayuden.

Solicitud de extracción: https://github.com/niklasvh/html2canvas/pull/417

+1 en tener la capacidad de renderizar viñetas en listas desordenadas ...

Esto también sería increíblemente útil para los proyectos en los que estoy trabajando. Tengo que convertir mis listas en párrafos y falsificar las viñetas.

Creo que incluso una solución provisional que ignore estilos de lista más complicados e implemente solo disco / cuadrado para listas desordenadas sería útil ... Seguiría esa solución provisional con otro: soporte básico para listas ordenadas (no probé el enfoque de @ adam-roth, pero lo haré en breve). ENTONCES, tal vez llegue a la lista de estilos más elegantes ...

Esta no será una solución que funcione para todos, pero aquí hay algo que he usado con cierto éxito. Html2Canvas admite selectores de pseudoclase muy bien, así que he vuelto a agregar las viñetas y los números con: antes de los filtros.

// Este código es SASS, pero puede escribirlo bien en CSS normal.
// También puede anidar ol, ul's para permitir listas anidadas (solo especifique una nueva posición izquierda para sangrar, en nuestro caso solo agregamos otros 30px por sangría).

#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.
            }
        }
    }
}

Luego ejecuto cualquier html que quiera renderizar a través de un filtro (en mi caso, un filtro angular, pero cualquier Javascript funcionaría)

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 solución que publiqué anteriormente ya no funciona con la versión actual de html2canvas. Aquí está mi nueva solución para este problema:

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

... básicamente convierte cada 'ol' y 'ul' en una colección de div. La operación se puede deshacer después de que se ejecute html2canvas.

Solo tengo curiosidad por saber si esto se está considerando o si hay algo que pueda hacer para ayudar a que esta función avance.

Se considera y se implementará en algún momento. El PR # 486 fue hecho para eso, y le di algunos comentarios al respecto. Una vez que se resuelvan, podría fusionarse.

¿Existe alguna probabilidad de que esto se resuelva en html2canvas en un futuro próximo?

Busqué "ul", "ol", "li" en el código y no encontré nada, pero los li están sangrados, por lo que debe haber alguna lógica para ello. ¿Alguien que pueda señalar dónde se ubicaría esto en el código, si es que ahora está allí?

Es un truco seguro, pero pude admitir un <ul> con viñetas en el PDF con este enfoque:

HTML
~~~

• • Reemplace sus ingresos con un {{output.monthlyIncome | moneda}} cheque mensual
• • Pague su hipoteca a cero
• • Pague su deuda a cero
• • Pague el 100% de la educación de sus hijos en un colegio o universidad pública
• • Permanezca cubierto hasta que su cónyuge / pareja cumpla 65 años o su hijo menor cumpla 23, lo que ocurra primero

~~~

MENOS / CSS
~~~

pdf-canvas ul {

list-style: none;
padding: 0;

}

pdf-canvas ul li {

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

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

}
~~~

Donde #pdf-canvas es el nombre de un DIV oculto con la plantilla PDF en él. Espero que esto ayude a cualquiera que intente hacer esto.

Utilizo TinyMCE para la edición, y los usuarios no deben ver ninguno de los "mecanismos internos", pero puede haber una forma de extenderlo para que se inserte un intervalo y •, pero una solución adecuada de 1 a 1 sería mucho mejor por supuesto.

Gracias,
Anders

Un simple truco:

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

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

Sin embargo, me pregunto, ¿por qué no se puede resolver esto en html2canvas?

Mi enfoque para evitar esto fue crear una tabla con 2 columnas y colocar • en la primera columna y el texto en la segunda. Era la única forma en que se renderizó correctamente.

Lo probé ahora mismo y las listas HTML funcionan bien en 1.0.0 alpha 10.

https://jsfiddle.net/boLxkgj8/264/ No puedo renderizar Bullet :( ¿Cómo pudiste hacer eso?

https://jsfiddle.net/boLxkgj8/264/ No puedo renderizar Bullet :( ¿Cómo pudiste hacer eso?

ok, no estabas usando la última versión, ahora parece que funciona:
https://jsfiddle.net/jeavhg05/4/