يجب أن يكون الحل من الناحية النظرية بسيطًا إلى حد ما (مجرد دائرة) ، ولكن مهما كان الحل ، فإنه يجب أن يأخذ في الاعتبار css لتخصيص مظهر الرموز النقطية. ناهيك عن استخدام عناصر القائمة بشكل شائع للأشياء التي لا تشبه حتى القوائم (على سبيل المثال ، رأس جيثب الذي يحتوي على "كود" و "الشبكة" وما إلى ذلك هو ul ، لذلك من الواضح أنه لا توجد حاجة إلى الرموز النقطية هناك بسبب القائمة- نوع النمط: لا شيء

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

أي أخبار عن هذه؟ أحتاج حقًا إلى هذه الوظيفة في تطبيقي. هل لدى أي شخص أي أفكار / حلول حول هذا؟ أو هل يمكن لشخص أن يعطيني بعض المعلومات حول كيفية تنفيذه؟

ها هو الكمان الذي يثبت أنه لا يعمل: http://jsfiddle.net/fYZ5h/

أحب أن أرى هذا ثابتًا ، خاصة بالنسبة للقوائم المرتبة.

تحرير: هناك حل بسيط للأشخاص المهتمين فقط برؤية الأرقام مقابل قائمة مرتبة. سيعمل هذا طالما قمت بتعيين خاصية CSS "list-style-position" على "الداخل" في عنصر "ol" الخاص بك. يجب أيضًا أن يتطابق "نوع نمط القائمة" مع التعبير العادي التالي:

/ ^ (عشري | علامة عشرية بصفر | أعلى ألفا | لاتيني علوي | روماني علوي | أقل من ألفا | إغريقي سفلي | لاتيني منخفض | روماني سفلي) $ / i

... طالما تم استيفاء هذين الشرطين ، يتم تقديم الأرقام بشكل صحيح للقائمة المرتبة. يمكنك استخدام CSS لضبط موضع القائمة لتعويض أي تأثير على "موضع نمط القائمة: من الداخل ؛" لديه على التخطيط الخاص بك.

لقد قمت بعمل حل بديل لمربع من نوع القائمة.

ربما تساعدك الحلول الخاصة بي.

طلب السحب: https://github.com/niklasvh/html2canvas/pull/417

+1 على القدرة على عرض الرموز النقطية في قوائم غير مرتبة ...

سيكون هذا أيضًا مفيدًا بشكل لا يصدق للمشاريع التي أعمل عليها. أنا مضطر إلى تحويل قوائمي إلى فقرات وتزييف الرموز النقطية.

أعتقد أن حلاً مؤقتًا يتجاهل أنماط قائمة أكثر تعقيدًا وينفذ قرصًا / مربعًا فقط للقوائم غير المرتبة سيكون مفيدًا ... سأتبع هذا التوقف مع آخر: الدعم الأساسي للقوائم المرتبة (لم يتم حاول نهج @ adam-roth ، ولكن سيتم قريبًا). بعد ذلك ، ربما تصل إلى أنماط قائمة مربي الحيوانات ...

لن يكون هذا حلاً مناسبًا للجميع ، ولكن هذا شيء استخدمته مع بعض النجاح. يدعم Html2Canvas محددات الفئة الزائفة بشكل جيد ، لذا قمت بإعادة إضافة الرموز النقطية والأرقام باستخدام: قبل المرشحات.

// This Code is 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 أريد عرضه من خلال مرشح (في حالتي ، مرشح زاوية ، ولكن أي جافا سكريبت سيعمل)

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's. يمكن التراجع عن العملية بعد تشغيل html2canvas.

مجرد فضول إذا كان هذا قيد النظر ، أو إذا كان هناك أي شيء يمكنني القيام به للمساعدة في تحريك هذه الميزة.

يتم النظر فيه وسيتم تنفيذه في مرحلة ما. تم إنشاء PR # 486 من أجله ، وقدمت بعض التعليقات عليه. بمجرد حلها ، يمكن دمجها.

هل من المحتمل أن يتم حل هذا في html2canvas في المستقبل القريب؟

لقد بحثت عن "ul" و "ol" و "li" في الكود ولم أجد شيئًا ، ومع ذلك تم وضع مسافة بادئة لـ li ، لذلك يجب أن يكون هناك بعض المنطق لذلك. أي شخص يمكن أن يشير إلى مكان وجود هذا في الكود ، إذا كان موجودًا الآن على الإطلاق؟

إنه اختراق بالتأكيد ، لكنني تمكنت من دعم <ul> في ملف PDF باستخدام هذا النهج:

لغة البرمجة
~~~

• • استبدل دخلك {{output.monthlyIncome | Currency}} شيك شهري
• • سداد الرهن العقاري الخاص بك إلى الصفر
• • سدد ديونك إلى الصفر
• • ادفع 100٪ من تعليم أطفالك في كلية أو جامعة عامة
• • ابقَ مغطى حتى يبلغ زوجك / شريكك 65 عامًا أو يبلغ طفلك الأصغر 23 عامًا ، أيهما يأتي أولاً

~~~

LESS / CSS
~~~

pdf-canvas ul {

list-style: none;
padding: 0;

}

pdf-canvas ul {

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 سيكون أفضل بكثير بالطبع.

شكرا،
أندرس

خدعة بسيطة:

لغة البرمجة
<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/