<p>html2canvas: क्लोन किए गए दस्तावेज़ में DIV खोजने में त्रुटि</p>

वही समस्या जब मैं स्थानीय संग्रहण में कैनवास को संग्रहीत करने का प्रयास करता हूं और React.js . का उपयोग करके किसी अन्य पृष्ठ से लिंक करता हूं

<Link to="/system">
            <button className="submitButton"  onClick={this.captureMap} >SUBMIT </button>
</Link>

   captureMap(){
      html2canvas(document.querySelector(".mapboxgl-canvas")).then(canvas => {
        // document.body.appendChild(canvas);
        var image = canvas;
        if(typeof localStorage !== "undefined"){
          localStorage.setItem('mapImg',image.toDataURL());
        }
      });
    }

एक ही समस्या का सामना
कॉन्स्ट मेनडोम = दस्तावेज़। क्रिएट एलिमेंट ('div');
mainDom.appendChild(domElem[0].cloneNode(true)); // domElem कुछ डोम ऑब्जेक्ट है

जब हम मेनडॉम को html2canvas में पास करते हैं तो यह नीचे त्रुटि दिखाता है।

html2canvas: क्लोन किए गए दस्तावेज़ में DIV खोजने में त्रुटि
demo.html#/Demo/ Widget:1 ध्यान में न आया (वादे में) क्लोन किए गए दस्तावेज़ में DIV खोजने में त्रुटि

@HarishSonar क्या आप कृपया इस मुद्दे को jsfiddle पर दोहरा सकते हैं?

यह अब तय है।
ऐसा लगता है कि हम डोम के साथ स्मृति में वस्तु के रूप में काम नहीं कर सकते हैं, इसके लिए प्रतिपादन की आवश्यकता है।
document.getElementsByTagName('BODY')[0].append(mainDom) जोड़ना; मेरी समस्या का समाधान किया।

एक बार html2canvas संसाधित हो जाने पर मुझे मेनडोम को हटाने का ख्याल रखना होगा।

भविष्य के आगंतुकों के लिए, मेरे पास भी यही मुद्दा है।

मैंने डीओएम नोड को क्लोन करना समाप्त कर दिया, इसे document.body के पहले बच्चे के रूप में सम्मिलित किया, और सीएसएस शैलियों position: absolute; top: -16384px; width: ${originalElementWidth} । यह उपयोगी है यदि आपको इसे स्क्रीनशॉट के रूप में कैप्चर करने से पहले DOM नोड में परिवर्तन करने की आवश्यकता है।

इसके अलावा, @niklasvh , यदि आप अभी भी एक नज़र डालना चाहते हैं तो यहां jsfiddle है: https://jsfiddle.net/bLwya8sf/1/

नमस्ते, मैं भी इस समस्या से मिला। और जब मैं html2canvas फ़ंक्शन को ट्रिगर करता हूं, तो मेरे प्रोजेक्ट में सभी अनुरोध भेजे जाते हैं। क्या आप कृपया मुझे समाधान बता सकते हैं？ बहुत बहुत धन्यवाद। यह मेरा कोड है:
सार्वजनिक डाउनबीटीएन () {
var targetDom = document.querySelector('#Box');
वर copyDom = targetDom.cloneNode (सच);
document.body.appendChild (कॉपीडॉम);
html2canvas(copyDom).then (कैनवास => {
var imgData = कैनवास.toDataURL ('छवि/जेपीईजी');
वर img = नई छवि ();
img.src = imgData;
img.onload = फ़ंक्शन () {
pdf.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
pdf.save('pdf_2.pdf');
};
copyDom.remove ();
});

यहां एक ही मुद्दा: इस मुद्दे से बचने के लिए मुझे अपने एसवीजी को एक div में लपेटना पड़ा ...

यहां एक ही मुद्दा: इस मुद्दे से बचने के लिए मुझे अपने एसवीजी को एक div में लपेटना पड़ा ...

कैसे करना है इसके बारे में बात कर सकते हैं?

यह अब तय है।
ऐसा लगता है कि हम डोम के साथ स्मृति में वस्तु के रूप में काम नहीं कर सकते हैं, इसके लिए प्रतिपादन की आवश्यकता है।
document.getElementsByTagName('BODY')[0].append(mainDom) जोड़ना; मेरी समस्या का समाधान किया।

एक बार html2canvas संसाधित हो जाने पर मुझे मेनडोम को हटाने का ख्याल रखना होगा।

हां, हमें प्रदान किए गए तत्व के साथ काम करना चाहिए, डोम के साथ स्मृति में वस्तु के रूप में काम नहीं करना चाहिए

यहां एक ही मुद्दा: इस मुद्दे से बचने के लिए मुझे अपने एसवीजी को एक div में लपेटना पड़ा ...

कैसे करना है इसके बारे में बात कर सकते हैं?

ज़रूर!
मैंने यहां एक उदाहरण बनाया
यह इंटरनेट एक्सप्लोरर 11 को छोड़कर सभी ब्राउज़रों में ठीक काम करता है: एचटीएमएल 2 कैनवास दृष्टिकोण अंतिम पीडीएफ में कुछ भी प्रस्तुत नहीं करता है ... पता नहीं है कि यह एचटीएमएल 2 कैनवास मुद्दा है या जेएसपीडीएफ एक ... कोई संकेत?
शुक्रिया

यह अब तय है।
ऐसा लगता है कि हम डोम के साथ स्मृति में वस्तु के रूप में काम नहीं कर सकते हैं, इसके लिए प्रतिपादन की आवश्यकता है।
document.getElementsByTagName('BODY')[0].append(mainDom) जोड़ना; मेरी समस्या का समाधान किया।
एक बार html2canvas संसाधित हो जाने पर मुझे मेनडोम को हटाने का ख्याल रखना होगा।

हां, हमें प्रदान किए गए तत्व के साथ काम करना चाहिए, डोम के साथ स्मृति में वस्तु के रूप में काम नहीं करना चाहिए

आप ऑनक्लोन कॉलबैक का उपयोग क्यों नहीं करते? यह आपको प्रस्तुत करने से पहले दस्तावेज़ क्लोन के साथ काम करने और उसमें परिवर्तन करने देगा।
उदाहरण के लिए आपके पास एक स्क्रॉल करने योग्य तालिका, गैंट चार्ट है, और आप पीडीएफ में दिखाई देने वाली छिपी हुई पंक्तियों के साथ पूरी तालिका को प्रिंट करना चाहते हैं।

html2canvas(document.body, {
        onclone: function(documentClone) {
            // target elements you want to change on the "documentClone" object
        })
        .then(function(canvas) {
            // print canvas with e.g: jsPDF
        });
    };

मैंने यहाँ IE11 के लिए हल किया है।