Die Lösung sollte theoretisch ziemlich einfach sein (es ist nur ein Kreis), aber was auch immer die Lösung ist, sie müsste das CSS berücksichtigen, um das Erscheinungsbild der Aufzählungszeichen anzupassen. Ganz zu schweigen davon, dass Listenelemente häufig für Dinge verwendet werden, die nicht einmal wie Listen aussehen (zum Beispiel ist der Github-Header mit "Code", "Network" usw. Stiltyp: keine

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

Gibt es Neuigkeiten zu diesem? Ich brauche diese Funktion wirklich in meiner App. Hat jemand Ideen/Workarounds dazu? Oder kann mir jemand Infos zur Umsetzung geben?

Hier ist die Geige, die beweist, dass sie nicht funktioniert: http://jsfiddle.net/fYZ5h/

Würde dies gerne beheben, insbesondere bei geordneten Listen.

Bearbeiten: Es gibt eine einfache Problemumgehung für Leute, die nur daran interessiert sind, die Zahlen gegen eine geordnete Liste zu sehen. Dies funktioniert, solange Sie die CSS-Eigenschaft 'list-style-position' in Ihrem 'ol'-Element auf 'inside' setzen. Außerdem muss Ihr 'list-style-type' mit der folgenden Regex übereinstimmen:

/^(Dezimal|Dezimal-führende-Null|Ober-Alpha|Ober-Latein|Ober-Roman|Unter-Alpha|Unter-Griechisch|Unter-Latein|Unter-Roman)$/i

...solange diese beiden Bedingungen erfüllt sind, werden die Zahlen für die geordnete Liste korrekt gerendert. Sie können CSS verwenden, um die Position der Liste anzupassen, um alle Auswirkungen auf die 'list-style-position: inside;' auf Ihrem Layout hat.

Ich habe eine Problemumgehung für ein Quadrat im Listenstil erstellt.

Vielleicht helfen dir meine Lösungen.

Pull-Request: https://github.com/niklasvh/html2canvas/pull/417

+1 zur Möglichkeit, Aufzählungszeichen in ungeordneten Listen zu rendern...

Dies wäre auch unglaublich hilfreich für Projekte, an denen ich arbeite. Ich muss meine Listen in Absätze umwandeln und die Aufzählungszeichen vortäuschen.

Ich denke, sogar eine Notlösung, die kompliziertere Listenstile ignoriert und nur Disc/Square für ungeordnete Listen implementiert, wäre nützlich .... Ich würde dieser Notlösung eine andere folgen: grundlegende Unterstützung für geordnete Listen (nicht habe den Ansatz von @adam-roth ausprobiert, werde es aber in Kürze tun). DANN kommen Sie vielleicht zu den schickeren Listenstilen...

Dies wird keine Lösung sein, die für alle funktioniert, aber hier ist etwas, das ich mit einigem Erfolg verwendet habe. Html2Canvas unterstützt Pseudoklassenselektoren gut, daher habe ich die Aufzählungszeichen und Zahlen mit :before-Filtern erneut hinzugefügt.

//Dieser Code ist SASS, aber Sie können ihn problemlos in normales CSS schreiben.
//Sie können auch ol, ul's verschachteln, um verschachtelte Listen zuzulassen (geben Sie einfach eine neue linke Position zum Einrücken an, in unserem Fall fügen wir nur weitere 30px pro Einzug hinzu).

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

Dann führe ich jeden HTML-Code aus, den ich durch einen Filter rendern möchte (In meinem Fall ein Winkelfilter, aber jedes Javascript würde funktionieren)

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

Der Workaround, den ich zuvor gepostet habe, funktioniert mit der aktuellen Version von html2canvas nicht mehr. Hier ist mein neuer Workaround für dieses Problem:

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

...im Grunde wandelt es jedes 'ol' und 'ul' in eine Sammlung von div's um. Der Vorgang kann rückgängig gemacht werden, nachdem html2canvas ausgeführt wurde.

Ich bin nur neugierig, ob dies in Betracht gezogen wird oder ob ich etwas tun kann, um dieses Feature voranzubringen.

Es wird überlegt und irgendwann umgesetzt. PR #486 wurde dafür gemacht, und ich gab einige Rückmeldungen dazu. Sobald diese behoben sind, könnte es zusammengeführt werden.

Besteht die Wahrscheinlichkeit, dass dies in naher Zukunft in html2canvas gelöst wird?

Ich habe im Code nach "ul", "ol", "li" gesucht und nichts gefunden, aber li sind eingerückt, also muss es eine Logik dafür geben. Kann jemand darauf hinweisen, wo das im Code stehen würde, wenn es jetzt überhaupt da ist?

Es ist sicher ein Hack, aber ich konnte mit diesem Ansatz ein Aufzählungszeichen <ul> im PDF unterstützen:

HTML
~~~

• • Ersetzen Sie Ihr Einkommen durch ein {{ output.monthlyIncome | Währung }} monatlicher Scheck
• • Zahle deine Hypothek auf null zurück
• • Zahle deine Schulden auf null
• • Bezahlen Sie 100 % der Ausbildung Ihrer Kinder an einem öffentlichen College oder einer Universität
• • Bleiben Sie versichert, bis Ihr Ehepartner/Partner 65 Jahre alt wird oder Ihr jüngstes Kind 23 Jahre alt wird, je nachdem, was zuerst eintritt

~~~

WENIGER/CSS
~~~

PDF-Leinwand ul {

list-style: none;
padding: 0;

}

PDF-Leinwand ul li {

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

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

}
~~~

Wobei #pdf-canvas der Name eines versteckten DIVs mit der darin enthaltenen PDF-Vorlage ist. Hoffe, das hilft jedem anderen, der dies versucht.

Ich benutze TinyMCE für die Bearbeitung, und Benutzer dürfen nichts vom "Innenleben" sehen, aber es könnte eine Möglichkeit geben, so zu erweitern, dass ein Span und • eingefügt wird, aber eine richtige 1-zu-1-Lösung wäre viel besser selbstverständlich.

Vielen Dank,
Anders

Ein einfacher Trick:

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

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

Ich frage mich jedoch, warum das nicht in html2canvas gelöst werden kann.

Mein Ansatz, dies zu umgehen, bestand darin, eine Tabelle mit 2 Spalten zu erstellen und • in die erste Spalte und den Text in die zweite einzufügen. Nur so wurde es richtig gerendert

Ich habe es gerade getestet und HTML-Listen funktionieren in 1.0.0 alpha 10 einwandfrei.

https://jsfiddle.net/boLxkgj8/264/ Ich kann Bullet nicht rendern :( Wie konntest du das machen?

https://jsfiddle.net/boLxkgj8/264/ Ich kann Bullet nicht rendern :( Wie konntest du das machen?

Ok, Sie haben nicht die neueste Version verwendet, jetzt sieht es so aus, als ob es funktioniert:
https://jsfiddle.net/jeavhg05/4/