解決策は理論的にはかなり単純（単なる円）である必要がありますが、解決策が何であれ、弾丸の外観をカスタマイズするためにcssを考慮する必要があります。 言うまでもなく、リストアイテムは、リストのようにも見えないものに一般的に使用されます（たとえば、「Code」、「Network」などを含むgithubヘッダーはulであるため、リストのために箇条書きは必要ありません-スタイルタイプ：なし

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

これに関するニュースはありますか？ 私は自分のアプリでこの機能が本当に必要です。 誰かがこれに関するアイデア/回避策を持っていますか？ または、誰かがそれを実装する方法について私にいくつかの情報を与えることができますか？

これが機能していないことを証明するフィドルです： http ：

特に順序付きリストの場合、これが修正されるのを楽しみにしています。

編集：順序付けられたリストに対して番号を表示することに興味がある人のための簡単な回避策があります。 これは、「ol」要素で「list-style-position」CSSプロパティを「inside」に設定している限り機能します。 また、「list-style-type」は次の正規表現と一致する必要があります。

/ ^（decimal | decimal-leading-zero | upper-alpha | upper-latin | upper-roman | lower-alpha | lower-greek | lower-latin | lower-roman）$ / i

...これらの制約の両方が満たされている限り、番号は順序付きリストに対して正しくレンダリングされます。 CSSを使用してリストの位置を調整し、「list-style-position：inside;」の影響を補正できます。 あなたのレイアウトにあります。

リストスタイルタイプの正方形の回避策を作成しました。

おそらく私の解決策はあなたを助けます。

プルリクエスト： https ：

順序付けられていないリストに箇条書きを表示する機能がある場合は+1 ...

これは、私が取り組んでいるプロジェクトにも非常に役立ちます。 リストを段落に変換して、弾丸を偽造する必要があります。

より複雑なリストスタイルを無視し、順序付けされていないリストに対してディスク/正方形のみを実装するストップギャップソリューションでさえも役立つと思います....私はそのストップギャップに別のものを続けます：順序付けられたリストの基本的なサポート（まだありません@ adam-rothのアプローチを試しましたが、まもなく）。 次に、より洗練されたリストスタイルを取得します...

これはすべての人に役立つソリューションになるわけではありませんが、これは私がある程度の成功を収めて使用したものです。 Html2Canvasは疑似クラスセレクターを問題なくサポートしているので、：beforeフィルターを使用して箇条書きと数字を再度追加しました。

//このコードはSASSですが、通常のcssで問題なく記述できます。
// ol、ulをネストして、ネストされたリストを許可することもできます（インデントする新しい左の位置を指定するだけです。この場合、インデントごとにさらに30pxを追加します）。

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

次に、レンダリングしたいhtmlをフィルターで実行します（私の場合は角度フィルターですが、任意のJavascriptで機能します）

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

以前に投稿した回避策は、現在のバージョンのhtml2canvasでは機能しなくなりました。 この問題に対する私の新しい回避策は次のとおりです。

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

...基本的に、すべての「ol」と「ul」をdivのコレクションに変換します。 操作は、html2canvasの実行後に元に戻すことができます。

これが検討されているのか、それともこの機能を進めるために私にできることがあるのか​​、興味があります。

これは検討されており、いずれ実装される予定です。 PR＃486はそれのために作られました、そして私はそれについていくつかのフィードバックをしました。 それらが解決されると、マージされる可能性があります。

近い将来、これがhtml2canvasで解決される可能性はありますか？

コードで「ul」、「ol」、「li」を検索しましたが、何も見つかりませんでしたが、liはインデントされているため、何らかのロジックが必要です。 これがコード内のどこにあるかを指摘できる人はいますか？

それは確かにハックですが、私はこのアプローチでPDFの箇条書き<ul>をサポートすることができました：

HTML
~~~

• •収入を{{output.monthlyIncome | 通貨}}毎月の小切手
• •住宅ローンをゼロまで返済する
• •あなたの借金をゼロに返済する
• •公立の大学で子供の教育の100％を支払う
• •配偶者/パートナーが65歳になるか、末っ子が23歳になるまで、どちらか早い方までカバーをかけたままにします。

~~~

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

}
~~~

ここで、 #pdf-canvasは、PDFテンプレートが含まれている非表示のDIVの名前です。 これが、これを行おうとしている他の人の助けになることを願っています。

私は編集にTinyMCEを使用しており、ユーザーには「内部動作」が表示されないようにする必要がありますが、スパンと•が挿入されるように拡張する方法があるかもしれませんが、適切な1対1のソリューションの方がはるかに優れています。もちろん。

ありがとう、
アンダース

簡単なトリック：

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

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

しかし、なぜこれをhtml2canvasで解決できないのでしょうか。

これをバイパスする私のアプローチは、2列のテーブルを作成し、最初の列に•、2番目の列にテキストを配置することでした。 それが正しくレンダリングされた唯一の方法でした

私は今テストしました、そしてHTMLリストは1.0.0 alpha10でうまく働きます。

https://jsfiddle.net/boLxkgj8/264/Bulletをレンダリングできません:(どうすればそれができますか

https://jsfiddle.net/boLxkgj8/264/Bulletをレンダリングできません:(どうすればそれができますか

わかりました。最新バージョンを使用していませんでしたが、機能しているように見えます。
https://jsfiddle.net/jeavhg05/4/