<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 잡히지 않음(약속) 복제된 문서에서 DIV를 찾는 동안 오류가 발생했습니다.

@HarishSonar jsfiddle 에서 문제를 복제할 수 있습니까?

이제 해결되었습니다.
dom을 메모리의 객체로 사용할 수 없는 것 같습니다. 렌더링이 필요합니다.
추가 document.getElementsByTagName('BODY')[0].append(mainDom); 내 문제를 해결했습니다.

html2canvas가 처리되면 mainDom 제거를 처리해야 합니다.

미래의 방문자를 위해 저도 같은 문제가 있습니다.

나는 DOM 노드를 복제하여 document.body 의 첫 번째 자식으로 삽입하고 CSS 스타일 position: absolute; top: -16384px; width: ${originalElementWidth} 사용하여 끝내었습니다. 이것은 스크린샷으로 캡처하기 전에 DOM 노드를 변경해야 하는 경우에 유용합니다.

또한 @niklasvh , 여전히 살펴보고 싶다면 jsfiddle이 있습니다. https://jsfiddle.net/bLwya8sf/1/

안녕하세요, 저도이 문제를 만났습니다. 그리고 html2canvas 함수를 트리거하면 내 프로젝트의 모든 요청이 전송됩니다. 해결책을 알려주시겠습니까? 정말 감사합니다. 이것은 내 코드입니다.
공개 다운Btn(){
var targetDom = document.querySelector('#Box');
var copyDom = targetDom.cloneNode(true);
document.body.appendChild(copyDom);
html2canvas(copyDom).then(캔버스 => {
var imgData = 캔버스.toDataURL('이미지/jpeg');
var img = 새로운 이미지();
img.src = imgData;
img.onload = 함수() {
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); 내 문제를 해결했습니다.

html2canvas가 처리되면 mainDom 제거를 처리해야 합니다.

예, 렌더링된 요소로 작업해야 하며 메모리의 객체로 dom을 사용해서는 안 됩니다.

동일한 문제: 이 문제를 피하기 위해 SVG를 div로 래핑해야 했습니다...

어떻게 하면 좋을까?

확신하는!
여기에서 예를 만들었습니다.
그것은 인터넷 익스플로러 11을 제외한 모든 브라우저에서 잘 작동 다음 html2canvas 접근 방식은 모르는 ... 최종 PDF에서 아무것도 렌더링하지 않는 경우 html2canvas 문제 또는 그 jsPDF의 하나 ... 어떤 힌트?
감사합니다

이제 해결되었습니다.
dom을 메모리의 객체로 사용할 수 없는 것 같습니다. 렌더링이 필요합니다.
추가 document.getElementsByTagName('BODY')[0].append(mainDom); 내 문제를 해결했습니다.
html2canvas가 처리되면 mainDom 제거를 처리해야 합니다.

예, 렌더링된 요소로 작업해야 하며 메모리의 객체로 dom을 사용해서는 안 됩니다.

왜 onclone 콜백을 사용하지 않습니까? 이렇게 하면 렌더링 전에 documentClone으로 작업하고 변경할 수 있습니다.
예를 들어 스크롤 가능한 테이블인 Gantt 차트가 있고 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을 해결했습니다.