<p>html2canvas: Ошибка поиска DIV в клонированном документе</p>

Та же проблема, когда я пытаюсь сохранить холст в локальном хранилище и ссылаться на другую страницу с помощью 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());
        }
      });
    }

Столкнувшись с той же проблемой
const mainDom = document.createElement ('div');
mainDom.appendChild (domElem [0] .cloneNode (true)); // domElem - это некий объект dom

Когда мы передаем mainDom в html2canvas, появляется ошибка ниже.

html2canvas: Ошибка поиска DIV в клонированном документе
demo.html # / Demo / Widget: 1 Uncaught (in promise) Ошибка при обнаружении DIV в клонированном документе.

@HarishSonar Не могли бы вы повторить проблему на jsfiddle?

Сейчас это исправлено.
Похоже, мы не можем работать с dom как с объектом в памяти, это требует рендеринга.
Добавление document.getElementsByTagName ('BODY') [0] .append (mainDom); решил мою проблему.

Просто я должен позаботиться об удалении mainDom после обработки html2canvas.

Как раз для будущих посетителей, у меня такая же проблема.

Я закончил тем, что клонировал узел DOM, вставив его как первого потомка document.body и использовал стили CSS position: absolute; top: -16384px; width: ${originalElementWidth} . Это полезно, если вам нужно внести изменения в узел DOM, прежде чем делать его снимок экрана.

Кроме того, @niklasvh , вот jsfiddle, если вы все еще хотите взглянуть: https://jsfiddle.net/bLwya8sf/1/

Привет, я тоже столкнулся с этой проблемой. И когда я запускаю функцию html2canvas, все запросы в моем проекте отправляются. Не могли бы вы рассказать мне о своем решении? Большое спасибо. Это мой код:
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 = новое изображение ();
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 ();
});

Такая же проблема здесь: мне пришлось обернуть свой SVG в div, чтобы избежать этой проблемы ...

Такая же проблема здесь: мне пришлось обернуть свой SVG в div, чтобы избежать этой проблемы ...

Может рассказать как это сделать?

Сейчас это исправлено.
Похоже, мы не можем работать с dom как с объектом в памяти, это требует рендеринга.
Добавление document.getElementsByTagName ('BODY') [0] .append (mainDom); решил мою проблему.

Просто я должен позаботиться об удалении mainDom после обработки html2canvas.

Да, мы должны работать с визуализированным элементом, а не с dom как с объектом в памяти

Такая же проблема здесь: мне пришлось обернуть свой SVG в div, чтобы избежать этой проблемы ...

Может рассказать как это сделать?

Конечно!
Я привел здесь пример .
Он отлично работает во всех браузерах, кроме Internet Explorer 11: подход html2canvas ничего не отображает в окончательном PDF-файле ... не знаю, проблема ли это html2canvas или проблема
Спасибо

Сейчас это исправлено.
Похоже, мы не можем работать с dom как с объектом в памяти, это требует рендеринга.
Добавление document.getElementsByTagName ('BODY') [0] .append (mainDom); решил мою проблему.
Просто я должен позаботиться об удалении mainDom после обработки html2canvas.

Да, мы должны работать с визуализированным элементом, а не с dom как с объектом в памяти

Почему бы вам просто не использовать обратный вызов onclone? Это позволит вам работать с documentClone перед рендерингом и вносить в него изменения.
Например, у вас есть прокручиваемая таблица, диаграмма Ганта, и вы хотите распечатать полную таблицу со скрытыми строками, видимыми в 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
        });
    };

Я решил для IE11 здесь .