<p>html2canvas: Fehler beim Finden des DIV im geklonten Dokument</p>

Gleiches Problem, wenn ich versuche, den Canvas im lokalen Speicher zu speichern und mit React.js auf eine andere Seite zu verlinken

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

Stehe vor dem gleichen Problem
const mainDom = document.createElement('div');
mainDom.appendChild(domElem[0].cloneNode(true)); // domElem ist ein Dom-Objekt

Wenn wir mainDom an html2canvas übergeben, wird der folgende Fehler angezeigt.

html2canvas: Fehler beim Finden des DIV im geklonten Dokument
demo.html#/Demo/ Widget:1 Nicht abgefangen (versprochen) Fehler beim Finden der DIV im geklonten Dokument

@HarishSonar Können Sie das Problem bitte auf jsfiddle replizieren?

Dies ist jetzt behoben.
Es scheint, dass wir nicht mit dom als Objekt im Speicher arbeiten können, es erfordert ein Rendern.
Hinzufügen von document.getElementsByTagName('BODY')[0].append(mainDom); hat mein Problem gelöst.

Ich muss mich nur um das Entfernen von mainDom kümmern, sobald html2canvas verarbeitet ist.

Nur für zukünftige Besucher habe ich auch das gleiche Problem.

Am Ende habe ich den DOM-Knoten geklont, als erstes Kind von document.body eingefügt und CSS-Stile position: absolute; top: -16384px; width: ${originalElementWidth} . Dies ist nützlich, wenn Sie Änderungen am DOM-Knoten vornehmen müssen, bevor Sie ihn als Screenshot aufnehmen.

Außerdem, @niklasvh , hier ist die jsfiddle, wenn Sie noch einen Blick darauf werfen möchten: https://jsfiddle.net/bLwya8sf/1/

Hallo, dieses Problem habe ich auch kennengelernt. Und wenn ich die html2canvas-Funktion auslöse, werden alle Anfragen in meinem Projekt gesendet. Könnten Sie mir bitte Ihre Lösung sagen ？ Vielen Dank. Das ist mein Code:
public downBtn(){
var targetDom = document.querySelector('#Box');
var copyDom = targetDom.cloneNode(true);
document.body.appendChild(copyDom);
html2canvas(copyDom).then( canvas => {
var imgData = canvas.toDataURL('image/jpeg');
var img = neues Image();
img.src = imgData;
img.onload = Funktion () {
pdf.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
pdf.save('pdf_2.pdf');
};
copyDom.remove();
});

Das gleiche Problem hier: Ich musste mein SVG in ein div einpacken, um dieses Problem zu vermeiden ...

Das gleiche Problem hier: Ich musste mein SVG in ein div einpacken, um dieses Problem zu vermeiden ...

Kann darüber sprechen, wie es geht?

Dies ist jetzt behoben.
Es scheint, dass wir nicht mit dom als Objekt im Speicher arbeiten können, es erfordert ein Rendern.
Hinzufügen von document.getElementsByTagName('BODY')[0].append(mainDom); hat mein Problem gelöst.

Ich muss mich nur um das Entfernen von mainDom kümmern, sobald html2canvas verarbeitet ist.

Ja, wir müssen mit gerenderten Elementen arbeiten, nicht mit dom als Objekt im Speicher

Das gleiche Problem hier: Ich musste mein SVG in ein div einpacken, um dieses Problem zu vermeiden ...

Kann darüber sprechen, wie es geht?

Sicher!
Ich habe hier ein Beispiel gemacht .
Es funktioniert in allen Browsern außer im Internet Explorer 11: der html2canvas Ansatz macht nicht alles in der letzten PDF ... weiß nicht , ob sein ein html2canvas Problem oder eine jsPDF ein ... irgendwelche Hinweise?
Dankeschön

Dies ist jetzt behoben.
Es scheint, dass wir nicht mit dom als Objekt im Speicher arbeiten können, es erfordert ein Rendern.
Hinzufügen von document.getElementsByTagName('BODY')[0].append(mainDom); hat mein Problem gelöst.
Ich muss mich nur um das Entfernen von mainDom kümmern, sobald html2canvas verarbeitet ist.

Ja, wir müssen mit gerenderten Elementen arbeiten, nicht mit dom als Objekt im Speicher

Warum nutzt du nicht einfach den Onclone-Callback? Auf diese Weise können Sie vor dem Rendern mit dem documentClone arbeiten und Änderungen daran vornehmen.
Sie haben beispielsweise eine scrollbare Tabelle, ein Gantt-Diagramm, und möchten die vollständige Tabelle mit den in einer PDF-Datei sichtbaren versteckten Zeilen drucken.

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

Ich habe hier für IE11 gelöst.