<p>html2canvas: Erro ao encontrar o DIV no documento clonado</p>

O mesmo problema quando tento armazenar a tela no armazenamento local e vincular a outra 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());
        }
      });
    }

Enfrentando o mesmo problema
const mainDom = document.createElement ('div');
mainDom.appendChild (domElem [0] .cloneNode (true)); // domElem é algum objeto dom

Quando passamos mainDom para html2canvas, ele mostra o erro abaixo.

html2canvas: Erro ao encontrar o DIV no documento clonado
demo.html # / Demo / Widget: 1 Não capturado (prometido) Erro ao encontrar o DIV no documento clonado

@HarishSonar Você pode replicar o problema no jsfiddle?

Isso está consertado agora.
Parece que não podemos trabalhar com dom como objeto na memória, requer renderização.
Adicionando document.getElementsByTagName ('BODY') [0] .append (mainDom); resolveu meu problema.

Só que tenho que cuidar da remoção do mainDom assim que o html2canvas for processado.

Apenas para futuros visitantes, também tenho o mesmo problema.

Acabei clonando o nó DOM, inserindo-o como o primeiro filho de document.body e usando estilos CSS position: absolute; top: -16384px; width: ${originalElementWidth} . Isso é útil se você precisar fazer alterações no nó DOM antes de capturá-lo como uma captura de tela.

Além disso, @niklasvh , aqui está o jsfiddle se ainda quiser dar uma olhada: https://jsfiddle.net/bLwya8sf/1/

Olá, também encontrei este problema. E quando eu acionar a função html2canvas, todas as solicitações em meu projeto são enviadas. Você poderia me dizer sua solução？ Muito obrigado. Este é o meu código:
public downBtn () {
var targetDom = document.querySelector ('# Box');
var copyDom = targetDom.cloneNode (true);
document.body.appendChild (copyDom);
html2canvas (copyDom) .then (canvas => {
var imgData = canvas.toDataURL ('imagem / jpeg');
var img = nova imagem ();
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 ();
});

O mesmo problema aqui: tive que envolver meu SVG em um div para evitar esse problema ...

O mesmo problema aqui: tive que envolver meu SVG em um div para evitar esse problema ...

Pode falar sobre como fazer isso?

Isso está consertado agora.
Parece que não podemos trabalhar com dom como objeto na memória, requer renderização.
Adicionando document.getElementsByTagName ('BODY') [0] .append (mainDom); resolveu meu problema.

Só que tenho que cuidar da remoção do mainDom assim que o html2canvas for processado.

Sim, devemos trabalhar com o elemento renderizado, não trabalhar com dom como objeto na memória

O mesmo problema aqui: tive que envolver meu SVG em um div para evitar esse problema ...

Pode falar sobre como fazer isso?

Certo!
Eu fiz um exemplo aqui .
Funciona bem em todos os navegadores, exceto no Internet Explorer 11: a abordagem html2canvas não renderiza nada no PDF final ... não sei se é um problema de html2canvas ou jsPDF ... alguma dica?
Obrigado

Isso está consertado agora.
Parece que não podemos trabalhar com dom como objeto na memória, requer renderização.
Adicionando document.getElementsByTagName ('BODY') [0] .append (mainDom); resolveu meu problema.
Só que tenho que cuidar da remoção do mainDom assim que o html2canvas for processado.

Sim, devemos trabalhar com o elemento renderizado, não trabalhar com dom como objeto na memória

Por que você simplesmente não usa o retorno de chamada onclone? Isso permitirá que você trabalhe com o documentClone antes de renderizá-lo e fazer alterações nele.
Por exemplo, você tem uma tabela rolável, gráfico de Gantt, e deseja imprimir a tabela inteira com as linhas ocultas visíveis em um 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
        });
    };

Resolvi para o IE11 aqui .