Теоретически решение должно быть довольно простым (это просто кружок), но какое бы решение ни было, оно должно учитывать CSS для настройки внешнего вида маркеров. Не говоря уже о том, что элементы списка обычно используются для вещей, которые даже не выглядят как списки (например, заголовок github, в котором есть «Код», «Сеть» и т. Д., Является ul, поэтому очевидно, что там нет маркеров из-за списка- стиль-тип: нет

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

Есть новости по этому поводу? Мне действительно нужна эта функция в моем приложении. У кого-нибудь есть идеи / обходные пути по этому поводу? Или кто-нибудь может дать мне некоторую информацию о том, как это реализовать?

Вот скрипка, которая доказывает, что она не работает: http://jsfiddle.net/fYZ5h/

Хотелось бы, чтобы это было исправлено, особенно для упорядоченных списков.

Изменить: есть простой обходной путь для людей, просто заинтересованных в просмотре чисел в упорядоченном списке. Это будет работать до тех пор, пока вы установите для свойства CSS 'list-style-position' значение 'inside' в вашем элементе 'ol'. Также ваш 'list-style-type' должен соответствовать следующему регулярному выражению:

/ ^ (десятичный | десятичный-ведущий-ноль | верхний альфа | верхний латинский | верхний римский алфавит | нижний альфа | нижний греческий | нижний латинский | нижний римский алфавит) $ / i

... пока соблюдаются оба этих ограничения, числа для упорядоченного списка отображаются правильно. Вы можете использовать CSS, чтобы отрегулировать положение списка, чтобы компенсировать любое влияние 'list-style-position: inside;' есть на вашем макете.

Я сделал обходной путь для квадрата в виде списка.

Возможно, мои решения вам помогут.

Запрос на вытягивание: https://github.com/niklasvh/html2canvas/pull/417

+1 за возможность отображать маркеры в неупорядоченных списках ...

Это также будет невероятно полезно для проектов, над которыми я работаю. Мне нужно преобразовать свои списки в абзацы и подделать маркеры.

Я думаю, что было бы полезно даже временное решение, которое игнорирует более сложные стили списков и реализует только диск / квадрат для неупорядоченных списков .... попробовал подход @adam-roth, но скоро будет). ТОГДА, может быть, перейдем к более красивым стилям списков ...

Это не будет подходящим для всех решением, но вот кое-что, что я использовал с некоторым успехом. Html2Canvas отлично поддерживает селекторы псевдоклассов, поэтому я повторно добавил маркеры и числа с помощью фильтров: before.

// Этот код - SASS, но вы можете написать его и на обычном CSS.
// Вы также можете вложить ol, ul, чтобы разрешить вложенные списки (просто укажите новую левую позицию для отступа, в нашем случае мы просто добавляем еще 30 пикселей на отступ).

#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 имеют отступ, поэтому для этого должна быть какая-то логика. Кто-нибудь, кто мог бы указать, где это будет расположено в коде, если оно сейчас вообще там?

Это наверняка взлом, но я смог поддержать маркированный <ul> в PDF с помощью такого подхода:

HTML
~~~

• • Замените свой доход на {{output.monthlyIncome | currency}} ежемесячный чек
• • Выплатите по ипотеке до нуля
• • Выплатите свой долг до нуля
• • Платите 100% за обучение своих детей в государственном колледже или университете.
• • Оставайтесь застрахованными до тех пор, пока вашему супругу / партнеру не исполнится 65 лет или вашему младшему ребенку не исполнится 23 года, в зависимости от того, что наступит раньше.

~~~

МЕНЬШЕ / 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 - это имя скрытого DIV с шаблоном PDF в нем. Надеюсь, это поможет кому-нибудь еще, пытаясь это сделать.

Я использую 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?

Мой подход к обходу этого заключался в том, чтобы создать таблицу с двумя столбцами и поместить • в первый столбец, а текст - во второй. Это был единственный способ правильно отрисовать

Я тестировал прямо сейчас, и списки HTML отлично работают в 1.0.0 alpha 10.

https://jsfiddle.net/boLxkgj8/264/ Я не могу отобразить Bullet :( Как ты мог это сделать

https://jsfiddle.net/boLxkgj8/264/ Я не могу отобразить Bullet :( Как ты мог это сделать

хорошо, вы не использовали последнюю версию, теперь похоже, что она работает:
https://jsfiddle.net/jeavhg05/4/