<p>html2canvas: Error al encontrar el DIV en el documento clonado</p>

El mismo problema cuando intento almacenar el lienzo en el almacenamiento local y vincularlo a otra página usando 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());
        }
      });
    }

Frente al mismo problema
const mainDom = document.createElement ('div');
mainDom.appendChild (domElem [0] .cloneNode (verdadero)); // domElem es un objeto dom

Cuando pasamos mainDom a html2canvas, se muestra el siguiente error.

html2canvas: Error al encontrar el DIV en el documento clonado
demo.html # / Demo / Widget: 1 No detectado (en promesa) Error al encontrar el DIV en el documento clonado

@HarishSonar ¿Puedes replicar el problema en jsfiddle?

Esto está arreglado ahora.
Parece que no podemos trabajar con dom como objeto en la memoria, requiere renderizado.
Añadiendo document.getElementsByTagName ('BODY') [0] .append (mainDom); resolvió mi problema.

Es solo que tengo que encargarme de la eliminación de mainDom una vez que se procesa html2canvas.

Solo para futuros visitantes, también tengo el mismo problema.

Terminé clonando el nodo DOM, insertándolo como el primer hijo de document.body y usando estilos CSS position: absolute; top: -16384px; width: ${originalElementWidth} . Esto es útil si necesita realizar cambios en el nodo DOM antes de capturarlo como captura de pantalla.

Además, @niklasvh , aquí está el jsfiddle si aún desea echar un vistazo: https://jsfiddle.net/bLwya8sf/1/

Hola, también encontré este problema. Y cuando activo la función html2canvas, se envían todas las solicitudes de mi proyecto. ¿Podría decirme su solución? Muchas gracias. Este es mi codigo:
public downBtn () {
var targetDom = document.querySelector ('# Box');
var copyDom = targetDom.cloneNode (verdadero);
document.body.appendChild (copyDom);
html2canvas (copyDom). then (lienzo => {
var imgData = canvas.toDataURL ('imagen / jpeg');
var img = nueva imagen ();
img.src = imgData;
img.onload = function () {
pdf.addImage (imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
pdf.save ('pdf_2.pdf');
};
copyDom.remove ();
});

El mismo problema aquí: tuve que envolver mi SVG en un div para evitar este problema ...

El mismo problema aquí: tuve que envolver mi SVG en un div para evitar este problema ...

¿Puede hablar sobre cómo hacerlo?

Esto está arreglado ahora.
Parece que no podemos trabajar con dom como objeto en la memoria, requiere renderizado.
Añadiendo document.getElementsByTagName ('BODY') [0] .append (mainDom); resolvió mi problema.

Es solo que tengo que encargarme de la eliminación de mainDom una vez que se procesa html2canvas.

Sí, debemos trabajar con el elemento renderizado, no trabajar con dom como objeto en la memoria.

El mismo problema aquí: tuve que envolver mi SVG en un div para evitar este problema ...

¿Puede hablar sobre cómo hacerlo?

¡Seguro!
He dado un ejemplo aquí .
Funciona bien en todos los navegadores excepto en Internet Explorer 11: el enfoque html2canvas no representa nada en el PDF final ... no sé si es un problema html2canvas o jsPDF ... ¿alguna
Gracias

Esto está arreglado ahora.
Parece que no podemos trabajar con dom como objeto en la memoria, requiere renderizado.
Añadiendo document.getElementsByTagName ('BODY') [0] .append (mainDom); resolvió mi problema.
Es solo que tengo que encargarme de la eliminación de mainDom una vez que se procesa html2canvas.

Sí, debemos trabajar con el elemento renderizado, no trabajar con dom como objeto en la memoria.

¿Por qué no usas la devolución de llamada onclone? Esto le permitirá trabajar con documentClone antes de renderizar y realizar cambios en él.
Por ejemplo, tiene una tabla desplazable, un diagrama de Gantt, y desea imprimir la tabla completa con las filas ocultas visibles en 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
        });
    };

He resuelto IE11 aquí .