<p>html2canvas : Erreur lors de la recherche du DIV dans le document cloné</p>

Même problème lorsque j'essaie de stocker le canevas dans le stockage local et de créer un lien vers une autre page à l'aide de 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());
        }
      });
    }

Face au même problème
const mainDom = document.createElement('div');
mainDom.appendChild(domElem[0].cloneNode(true)); // domElem est un objet dom

Lorsque nous passons mainDom à html2canvas, l'erreur ci-dessous s'affiche.

html2canvas : Erreur lors de la recherche du DIV dans le document cloné
demo.html#/Demo/ Widget:1 Uncaught (in promise) Erreur lors de la recherche du DIV dans le document cloné

@HarishSonar Pouvez-vous, s'il vous plaît, reproduire le problème sur jsfiddle ?

C'est corrigé maintenant.
Il semble que nous ne puissions pas travailler avec dom comme objet en mémoire, cela nécessite un rendu.
Ajout de document.getElementsByTagName('BODY')[0].append(mainDom); résolu mon problème.

C'est juste que je dois m'occuper de la suppression de mainDom une fois que html2canvas est traité.

Juste pour les futurs visiteurs, j'ai aussi le même problème.

J'ai fini par cloner le nœud DOM, l'insérer en tant que premier enfant de document.body et utiliser les styles CSS position: absolute; top: -16384px; width: ${originalElementWidth} . Ceci est utile si vous devez apporter des modifications au nœud DOM avant de le capturer en tant que capture d'écran.

Aussi, @niklasvh , voici le jsfiddle si vous souhaitez toujours jeter un œil : https://jsfiddle.net/bLwya8sf/1/

Bonjour, j'ai également rencontré ce problème. Et lorsque je déclenche la fonction html2canvas, toutes les requêtes de mon projet sont envoyées. Pourriez-vous s'il vous plaît me dire votre solution Merci beaucoup. C'est mon 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 = nouvelle image();
img.src = imgDonnées;
img.onload = fonction () {
pdf.addImage(imgData, 'jpeg', 0, 0, this.width * 0,225, this.height * 0,225);
pdf.save('pdf_2.pdf');
} ;
copyDom.remove();
});

Même problème ici : j'ai dû envelopper mon SVG dans un div pour éviter ce problème...

Même problème ici : j'ai dû envelopper mon SVG dans un div pour éviter ce problème...

Pouvez-vous parler de la façon de le faire?

C'est corrigé maintenant.
Il semble que nous ne puissions pas travailler avec dom comme objet en mémoire, cela nécessite un rendu.
Ajout de document.getElementsByTagName('BODY')[0].append(mainDom); résolu mon problème.

C'est juste que je dois m'occuper de la suppression de mainDom une fois que html2canvas est traité.

Oui, nous devons travailler avec l'élément rendu, pas avec dom comme objet en mémoire

Même problème ici : j'ai dû envelopper mon SVG dans un div pour éviter ce problème...

Pouvez-vous parler de la façon de le faire?

Sûr!
J'ai fait un exemple ici .
Cela fonctionne bien dans tous les navigateurs sauf dans Internet Explorer 11 : l'approche html2canvas ne rend rien dans le PDF final... je ne sais pas s'il s'agit d'un problème html2canvas ou jsPDF ... des conseils ?
Merci

C'est corrigé maintenant.
Il semble que nous ne puissions pas travailler avec dom comme objet en mémoire, cela nécessite un rendu.
Ajout de document.getElementsByTagName('BODY')[0].append(mainDom); résolu mon problème.
C'est juste que je dois m'occuper de la suppression de mainDom une fois que html2canvas est traité.

Oui, nous devons travailler avec l'élément rendu, pas avec dom comme objet en mémoire

Pourquoi n'utilisez-vous pas simplement le rappel onclone ? Cela vous permettra de travailler avec le documentClone avant le rendu et d'y apporter des modifications.
Par exemple, vous avez un tableau déroulant, un diagramme de Gantt, et vous souhaitez imprimer le tableau complet avec les lignes masquées visibles dans un PDF.

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

J'ai résolu pour IE11 ici .