Html2canvas: Невозможно получить содержимое div с "display: none"

Html2canvas правильно интерпретирует стиль display: none и, следовательно, не отображает скрытый элемент. Чтобы выполнить то, что вы хотите, вы можете абсолютно позиционировать видимый элемент за пределами области просмотра страницы (если вы хотите «визуализировать скрытый элемент»).

Может быть полезно.
Спасибо !

Он работает тогда и только тогда, когда в div есть css, который не является " display: none ". поэтому я использовал комбинацию .show () и .hide (), чтобы сделать элемент видимым и скрытым, чтобы сформировать Canvas

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

Я нашел информацию в Интернете. Мы можем установить css для указанного div с помощью « display: none », а затем добавить опцию onclone, как указано выше. Пожалуйста, добавьте опцию «loggin: true», чтобы увидеть, что произойдет.

На самом деле трюк с выводом контейнера из области просмотра с абсолютным положением и отрицательными значениями сверху / слева - не работает в Firefox, он выдает исключение NS_ERROR_FAILURE

Это работает, хотя в Chrome

Я столкнулся с этой проблемой совсем недавно, и если вы хотите, чтобы конкретный div был невидимым и снимался с экрана, установите свойства css как

height: 0%
overflow:hidden

У меня не работает @ kchen1025

Я закончил тем, что сгенерировал холст сразу после целевого div, а затем скрыл этот div сразу после загрузки холста. Мерцание еле заметно.

Мой код выглядит так:

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

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

Здравствуйте, я работаю с Angular 6 и "html2canvas", чтобы создать PDF-файл с "jsPdf" .... Я хотел сделать снимок экрана со скрытым div, и я не мог этого сделать, пока не ДОСТИГНУ

захват выполняется в div с идентификатором "html-pdf"

"HTML"
` Студенческий билет / а>

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

/ div
/ div`

"js или в angular - это Typescript"
`download2 () {
вар imgcab: строка;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {scale: 2}). Тогда (function (canvas) {

var img = canvas.toDataURL ("изображение / png", 1);

var doc = new jsPDF ({
ориентация: 'p',
единица измерения: 'мм',
формат: 'письмо',
});

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

И самое главное скрыть div внутри экрана.

«CSS»
#pdf { overflow: hidden; height: 0; }

код создает PDF-файл с захватом div "html-pdf", который находится внутри скрытого div "pdf" ...

Я надеюсь ты им служишь

Я написал это по-испански, и это переведено из Чили;

Я думаю, что правильный способ выполнить эту работу - использовать свойство onclone , https://stackoverflow.com/a/51049443/2251303