Html2canvas: Não é possível obter o conteúdo de divs com "display: none"

O Html2canvas interpreta o estilo display: none corretamente e, portanto, não renderizará um elemento oculto. Para realizar o que deseja, você pode posicionar absolutamente um elemento visível fora da janela de visualização da página (se o desejo for "renderizar um elemento oculto").

Pode ser útil.
Obrigado !

Funciona se e somente se o div tiver css que não seja " display: none ". então eu usei a combinação .show () e .hide () para tornar o elemento visível e oculto para formar o Canvas

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

Encontrei algumas informações na Internet. Podemos definir css para o div especificado com " display: none " e adicionar a opção onclone como acima. Por favor, adicione a opção "loggin: true" para ver o que acontece

Na verdade, o truque de colocar o contêiner fora de uma janela de visualização com posição absoluta e valores negativos superior / esquerdo - não funciona no Firefox, ele lança a exceção NS_ERROR_FAILURE

Embora funcione no Chrome

Eu encontrei esse problema recentemente e se você quiser que um determinado div fique invisível e tenha uma captura de tela, defina as propriedades de css como

height: 0%
overflow:hidden

Isso não funciona para mim @ kchen1025

Acabei gerando o canvas imediatamente após o div de destino e, em seguida, escondendo o div imediatamente após o canvas ser carregado. A cintilação é quase imperceptível.

Meu código é parecido com este:

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});

Olá, estou trabalhando com Angular 6 e "html2canvas" para criar um PDF com "jsPdf" .... Eu queria fazer uma captura de tela para um div oculto e não pude fazer isso até que o CONSEGUIR

a captura é feita para o div com id "html-pdf"

"HTML"
` Cartão de estudante / a>

div id = "pdf" * ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">

/ div
/ div`

"js ou em angular é texto datilografado"
`download2 () {
var imgcab: string;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {escala: 2}). Então (função (tela) {

var img = canvas.toDataURL ("imagem / png", 1);

var doc = new jsPDF ({
orientação: 'p',
unidade: 'mm',
formato: 'carta',
});

doc.addImage (img, 'PNG', 2,2,212,272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save ('testCanvas.pdf');
}); `

E o mais importante é esconder o div dentro da tela.

"CSS"
#pdf { overflow: hidden; height: 0; }

o código cria um pdf com a captura do div "html-pdf" que está dentro do div oculto "pdf" ...

Eu espero que você os sirva

Escrevi em espanhol e está traduzido do Chile;

Acho que a maneira certa de fazer o trabalho é usar a propriedade onclone , https://stackoverflow.com/a/51049443/2251303