<p>html2canvas: Kesalahan menemukan DIV dalam dokumen kloning</p>

Masalah yang sama ketika saya mencoba menyimpan kanvas di Penyimpanan lokal dan menautkan ke halaman lain dengan menggunakan 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());
        }
      });
    }

Menghadapi masalah yang sama
const mainDom = document.createElement('div');
mainDom.appendChild(domElem[0].cloneNode(true)); // domElem adalah beberapa objek dom

Ketika kami meneruskan mainDom ke html2canvas itu menunjukkan kesalahan di bawah ini.

html2canvas: Kesalahan menemukan DIV dalam dokumen kloning
demo.html#/Demo/ Widget:1 Tidak tertangkap (dalam janji) Kesalahan menemukan DIV dalam dokumen kloning

@HarishSonar Bisakah Anda mereplikasi masalah di jsfiddle?

Ini sudah diperbaiki sekarang.
Sepertinya kita tidak bisa bekerja dengan dom sebagai objek di memori, itu membutuhkan rendering.
Menambahkan document.getElementsByTagName('BODY')[0].append(mainDom); memecahkan masalah saya.

Hanya saja saya harus mengurus penghapusan mainDom setelah html2canvas diproses.

Hanya untuk pengunjung masa depan, saya juga memiliki masalah yang sama.

Saya akhirnya mengkloning simpul DOM, memasukkannya sebagai anak pertama dari document.body , dan menggunakan gaya CSS position: absolute; top: -16384px; width: ${originalElementWidth} . Ini berguna jika Anda perlu membuat perubahan pada simpul DOM sebelum menangkapnya sebagai tangkapan layar.

Juga, @niklasvh , inilah jsfiddle jika Anda masih ingin melihatnya: https://jsfiddle.net/bLwya8sf/1/

Hai, saya juga mengalami masalah ini. Dan ketika saya memicu fungsi html2canvas, semua permintaan dalam proyek saya dikirim. Bisakah Anda memberi tahu saya solusi Anda？ Terima kasih banyak. Ini kode saya:
downBtn publik(){
var targetDom = document.querySelector('#Box');
var copyDom = targetDom.cloneNode(benar);
document.body.appendChild(copyDom);
html2canvas(copyDom).lalu( kanvas => {
var imgData = kanvas.toDataURL('gambar/jpeg');
var img = Gambar baru();
img.src = imgData;
img.onload = fungsi () {
pdf.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
pdf.save('pdf_2.pdf');
};
copyDom.hapus();
});

Masalah yang sama di sini: Saya harus membungkus SVG saya menjadi div untuk menghindari masalah ini...

Masalah yang sama di sini: Saya harus membungkus SVG saya menjadi div untuk menghindari masalah ini...

Dapat berbicara tentang bagaimana melakukannya?

Ini sudah diperbaiki sekarang.
Sepertinya kita tidak bisa bekerja dengan dom sebagai objek di memori, itu membutuhkan rendering.
Menambahkan document.getElementsByTagName('BODY')[0].append(mainDom); memecahkan masalah saya.

Hanya saja saya harus mengurus penghapusan mainDom setelah html2canvas diproses.

Ya, kita harus bekerja dengan elemen yang dirender, tidak bekerja dengan dom sebagai objek di memori

Masalah yang sama di sini: Saya harus membungkus SVG saya menjadi div untuk menghindari masalah ini...

Dapat berbicara tentang bagaimana melakukannya?

Tentu!
Saya telah membuat contoh di sini .
Ini berfungsi dengan baik di semua browser kecuali di Internet Explorer 11: pendekatan html2canvas tidak membuat apa pun di PDF akhir...tidak tahu apakah ini masalah html2canvas atau jsPDF ...ada petunjuk?
Terima kasih

Ini sudah diperbaiki sekarang.
Sepertinya kita tidak bisa bekerja dengan dom sebagai objek di memori, itu membutuhkan rendering.
Menambahkan document.getElementsByTagName('BODY')[0].append(mainDom); memecahkan masalah saya.
Hanya saja saya harus mengurus penghapusan mainDom setelah html2canvas diproses.

Ya, kita harus bekerja dengan elemen yang dirender, tidak bekerja dengan dom sebagai objek di memori

Mengapa Anda tidak menggunakan callback onclone saja? Ini akan memungkinkan Anda bekerja dengan documentClone sebelum membuat dan membuat perubahan padanya.
Misalnya Anda memiliki tabel yang dapat digulir, bagan Gantt, dan Anda ingin mencetak tabel lengkap dengan baris tersembunyi yang terlihat dalam 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
        });
    };

Saya telah memecahkan untuk IE11 di sini .