समाधान सिद्धांत रूप में काफी सरल होना चाहिए (यह सिर्फ एक सर्कल है), लेकिन जो भी समाधान है उसे गोलियों की उपस्थिति को अनुकूलित करने के लिए सीएसएस पर विचार करना होगा। सूची वस्तुओं का उल्लेख नहीं करने के लिए आमतौर पर उन चीजों के लिए उपयोग किया जाता है जो सूचियों की तरह भी नहीं दिखती हैं (उदाहरण के लिए जीथब हेडर जिसमें "कोड", "नेटवर्क" आदि है, एक उल है, इसलिए स्पष्ट रूप से सूची के कारण वहां गोलियों की आवश्यकता नहीं है- शैली-प्रकार: कोई नहीं

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

इस पर कोई खबर? मुझे वास्तव में अपने ऐप में इस कार्यक्षमता की आवश्यकता है। क्या किसी के पास इस पर कोई विचार/समाधान है? या कोई मुझे कुछ जानकारी दे सकता है कि इसे कैसे कार्यान्वित किया जाए?

यहाँ बेला है जो साबित करता है कि यह काम नहीं कर रहा है: http://jsfiddle.net/fYZ5h/

विशेष रूप से आदेशित सूचियों के लिए इसे निश्चित देखना अच्छा लगेगा।

संपादित करें: एक आदेशित सूची के विरुद्ध संख्याओं को देखने में रुचि रखने वाले लोगों के लिए एक आसान समाधान है। यह तब तक काम करेगा जब तक आप अपने 'ol' तत्व पर 'सूची-शैली-स्थिति' सीएसएस संपत्ति को 'अंदर' पर सेट करते हैं। साथ ही आपकी 'सूची-शैली-प्रकार' को निम्नलिखित रेगेक्स से मेल खाना चाहिए:

/^(दशमलव|दशमलव-अग्रणी-शून्य|ऊपरी-अल्फा|ऊपरी-लैटिन|ऊपरी-रोमन|निचला-अल्फा|निचला-ग्रीक|निचला-लैटिन|निचला-रोमन)$/i

...जब तक उन दोनों बाधाओं को पूरा किया जाता है, क्रमित सूची के लिए संख्याओं को सही ढंग से प्रस्तुत किया जाता है। आप 'सूची-शैली-स्थिति: अंदर;' के किसी भी प्रभाव की भरपाई के लिए सूची की स्थिति को समायोजित करने के लिए सीएसएस का उपयोग कर सकते हैं। आपके लेआउट पर है।

मैंने सूची-शैली-प्रकार वर्ग के लिए वर्कअराउंड बनाया।

शायद मेरे समाधान आपकी मदद करते हैं।

पुल अनुरोध: https://github.com/niklasvh/html2canvas/pull/417

+1 अनियंत्रित सूचियों में गोलियों को प्रस्तुत करने की क्षमता रखने पर ...

यह उन परियोजनाओं के लिए भी अविश्वसनीय रूप से सहायक होगा जिन पर मैं काम कर रहा हूं। मुझे अपनी सूचियों को अनुच्छेदों में बदलना है और गोलियों को नकली बनाना है।

मुझे लगता है कि एक स्टॉप-गैप समाधान भी जो अधिक जटिल सूची शैलियों को अनदेखा करता है और अनियंत्रित सूचियों के लिए केवल डिस्क/स्क्वायर लागू करता है, उपयोगी होगा .... मैं उस स्टॉप-गैप पर दूसरे के साथ पालन करूंगा: ऑर्डर की गई सूचियों के लिए मूल समर्थन (नहीं @ एडम-रोथ के दृष्टिकोण की कोशिश की, लेकिन जल्द ही)। फिर, शायद कट्टर सूची शैलियों को प्राप्त करें ...

यह एक ऐसा समाधान नहीं है जो सभी के लिए काम करता है, लेकिन यहां कुछ ऐसा है जिसका मैंने कुछ सफलता के साथ उपयोग किया है। Html2Canvas स्यूडोक्लास चयनकर्ताओं का समर्थन करता है, इसलिए मैंने गोलियों और संख्याओं को फिर से जोड़ा है: फ़िल्टर से पहले।

// यह कोड एसएएसएस है, लेकिन आप इसे नियमित सीएसएस में ठीक लिख सकते हैं।
// आप नेस्टेड सूचियों को अनुमति देने के लिए ol, ul's को भी नेस्ट कर सकते हैं (बस इंडेंट करने के लिए एक नई बाईं स्थिति निर्दिष्ट करें, हमारे मामले में हम केवल एक और 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.
            }
        }
    }
}

फिर मैं एक फिल्टर के माध्यम से जो भी एचटीएमएल प्रस्तुत करना चाहता हूं उसे चलाता हूं (मेरे मामले में एक कोणीय फ़िल्टर, लेकिन कोई भी जावास्क्रिप्ट काम करेगा)

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 के चलने के बाद ऑपरेशन को पूर्ववत किया जा सकता है।

बस जिज्ञासु अगर इस पर विचार किया जा रहा है, या अगर कुछ है तो मैं इस सुविधा को आगे बढ़ाने में मदद कर सकता हूं।

इस पर विचार किया गया है और इसे किसी बिंदु पर लागू किया जाएगा। पीआर #486 इसके लिए बनाया गया था, और मैंने इस पर कुछ प्रतिक्रिया दी। एक बार जब वे हल हो जाएंगे, तो यह विलय हो सकता है।

निकट भविष्य में html2canvas में इसे हल करने की कोई संभावना है?

मैंने कोड में "उल", "ओएल", "ली" की तलाश की और कुछ भी नहीं मिला, फिर भी ली इंडेंट हैं, इसलिए इसके लिए कुछ तर्क होना चाहिए। कोई भी जो यह इंगित कर सकता है कि यह कोड में कहां स्थित होगा, अगर यह अब वहां है?

यह निश्चित रूप से एक हैक है, लेकिन मैं इस दृष्टिकोण के साथ पीडीएफ में बुलेटेड <ul> का समर्थन करने में सक्षम था:

एचटीएमएल
~~~

• • अपनी आय को {{output.monthlyIncome | . से बदलें मुद्रा }} मासिक चेक
• • अपने गिरवी को शून्य पर चुकाएं
• • अपने कर्ज को शून्य पर चुकाएं
• • किसी सार्वजनिक कॉलेज या विश्वविद्यालय में अपने बच्चों की शिक्षा का 100% भुगतान करें
• • जब तक आपका जीवनसाथी/साथी 65 वर्ष का नहीं हो जाता या आपका सबसे छोटा बच्चा 23 वर्ष का नहीं हो जाता, जो भी पहले हो, तब तक कवर्ड रहें

~~~

कम/सीएसएस
~~~

पीडीएफ-कैनवास उल {

list-style: none;
padding: 0;

}

पीडीएफ-कैनवास उल ली {

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

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

}
~~~

जहां #pdf-canvas एक छिपे हुए डीआईवी का नाम है जिसमें पीडीएफ टेम्पलेट है। उम्मीद है कि यह किसी और को ऐसा करने की कोशिश करने में मदद करता है।

मैं संपादन के लिए TinyMCE का उपयोग करता हूं, और उपयोगकर्ताओं को "आंतरिक कामकाज" में से कोई भी नहीं देखना चाहिए, लेकिन विस्तार करने का एक तरीका हो सकता है ताकि एक स्पैन और • डाला जा सके, लेकिन एक उचित 1-से-1 समाधान बहुत बेहतर होगा बेशक।

धन्यवाद,
ऐन्डर्स

एक आसान ट्रिक:

एचटीएमएल
<ul><li>Item 1</li><li>Item 2</li></ul>

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

मुझे आश्चर्य है कि, इसे html2canvas में क्यों हल नहीं किया जा सकता है?

इसे बाय-पास करने के लिए मेरा दृष्टिकोण 2 कॉलम के साथ एक टेबल बनाना था और पहले कॉलम में • और दूसरे में टेक्स्ट डालना था। यह एकमात्र तरीका था कि इसे सही ढंग से प्रस्तुत किया गया था

मैंने अभी परीक्षण किया है, और HTML सूचियाँ 1.0.0 अल्फ़ा 10 में ठीक काम करती हैं।

https://jsfiddle.net/boLxkgj8/264/ मैं बुलेट रेंडर नहीं कर सकता :( आप ऐसा कैसे कर सकते हैं

https://jsfiddle.net/boLxkgj8/264/ मैं बुलेट रेंडर नहीं कर सकता :( आप ऐसा कैसे कर सकते हैं

ठीक है, आप नवीनतम संस्करण का उपयोग नहीं कर रहे थे, अब ऐसा लगता है कि यह काम करता है:
https://jsfiddle.net/jeavhg05/4/