A solução deveria, em teoria, ser bastante simples (é apenas um círculo), mas qualquer que seja a solução, ele teria que considerar o css para personalizar a aparência dos marcadores. Sem mencionar que os itens de lista são comumente usados ​​para coisas que nem mesmo se parecem com listas (por exemplo, o cabeçalho do github que tem "Código", "Rede" etc. é um ul, então obviamente nenhum marcador é necessário por causa da lista- style-type: nenhum

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

Algumas notícias sobre este? Eu realmente preciso dessa funcionalidade no meu aplicativo. Alguém tem alguma ideia / solução alternativa para isso? Ou alguém pode me dar algumas informações sobre como implementá-lo?

Aqui está o violino que prova que não está funcionando: http://jsfiddle.net/fYZ5h/

Adoraria ver isso corrigido, especialmente para listas ordenadas.

Edit: há uma solução simples para as pessoas interessadas apenas em ver os números em uma lista ordenada. Isso funcionará contanto que você defina a propriedade CSS 'list-style-position' como 'inside' no seu elemento 'antigo'. Além disso, o seu 'tipo de lista' deve corresponder ao seguinte regex:

/ ^ (decimal | decimal-zero à esquerda | alfa superior | latim superior | romano superior | alfa inferior | grego inferior | latim inferior | romano inferior) $ / i

... desde que ambas as restrições sejam atendidas, os números são renderizados corretamente para a lista ordenada. Você pode usar CSS para ajustar a posição da lista para compensar qualquer impacto o 'list-style-position: inside;' tem em seu layout.

Fiz uma solução alternativa para o quadrado do tipo lista.

Talvez minhas soluções ajudem você.

Solicitação pull: https://github.com/niklasvh/html2canvas/pull/417

+1 em ter a capacidade de renderizar marcadores em listas não ordenadas ...

Isso também seria extremamente útil para os projetos em que estou trabalhando. Estou tendo que converter minhas listas em parágrafos e falsificar os marcadores.

Acho que até mesmo uma solução temporária que ignora estilos de lista mais complicados e implementa apenas disco / quadrado para listas não ordenadas seria útil ... Eu seguiria essa falha com outra: suporte básico para listas ordenadas (não tentei a abordagem de @adam-roth, mas o fará em breve). ENTÃO, talvez vá para os estilos de lista mais sofisticados ...

Esta não será uma solução que funcione para todos, mas aqui está algo que usei com algum sucesso. Html2Canvas oferece suporte a seletores de pseudoclasse muito bem, portanto, adicionei novamente os marcadores e números com os filtros: before.

// Este código é SASS, mas você poderia escrevê-lo perfeitamente em css normal.
// Você também pode aninhar ol, ul's para permitir listas aninhadas (apenas especifique uma nova posição à esquerda para recuar, no nosso caso apenas adicionamos outros 30px por recuo).

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

Em seguida, executo qualquer html que desejo renderizar por meio de um filtro (no meu caso, um filtro angular, mas qualquer Javascript funcionaria)

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

A solução que postei anteriormente não funciona mais com a versão atual do html2canvas. Esta é minha nova solução alternativa para esse problema:

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

... basicamente ele converte cada 'ol' e 'ul' em uma coleção de div's. A operação pode ser desfeita após a execução do html2canvas.

Só estou curioso para saber se isso está sendo considerado ou se há algo que eu possa fazer para ajudar a mover esse recurso.

É considerado e será implementado em algum momento. PR # 486 foi feito para isso e eu dei alguns comentários sobre ele. Depois de resolvidos, eles podem ser mesclados.

Há alguma probabilidade de isso ser resolvido no html2canvas em um futuro próximo?

Procurei "ul", "ol", "li" no código e não encontrei nada, mas os li's estão recuados, então deve haver alguma lógica para isso. Alguém que poderia apontar onde isso estaria localizado no código, se agora estiver lá?

É um hack com certeza, mas fui capaz de oferecer suporte a um marcador <ul> no PDF com esta abordagem:

HTML
~~~

• • Substitua sua renda por um {{output.monthlyIncome | currency}} cheque mensal
• • Pague sua hipoteca a zero
• • Pague sua dívida a zero
• • Pague 100% da educação de seus filhos em uma faculdade ou universidade pública
• • Permaneça coberto até que seu cônjuge / parceiro complete 65 ou seu filho mais novo faça 23, o que ocorrer primeiro

~~~

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

}
~~~

Onde #pdf-canvas é o nome de um DIV oculto com o modelo PDF nele. Espero que isso ajude alguém a tentar fazer isso.

Eu uso o TinyMCE para a edição e os usuários não devem ver nenhum dos "funcionamentos internos", mas pode haver uma maneira de estender para que um intervalo e • sejam inseridos, mas uma solução 1 para 1 adequada seria muito melhor claro.

Obrigado,
Anders

Um truque simples:

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

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

Eu me pergunto, por que isso não pode ser resolvido em html2canvas?

Minha abordagem para contornar isso foi criar uma tabela com 2 colunas e colocar • na primeira coluna e o texto na segunda. Foi a única maneira que foi renderizado corretamente

Eu testei agora, e as listas de HTML funcionam bem no 1.0.0 alpha 10.

https://jsfiddle.net/boLxkgj8/264/ Não consigo renderizar Bullet :( Como você pôde fazer isso

https://jsfiddle.net/boLxkgj8/264/ Não consigo renderizar Bullet :( Como você pôde fazer isso

ok, você não estava usando a versão mais recente, agora parece que funciona:
https://jsfiddle.net/jeavhg05/4/