<p>html2canvas tidak dapat menangkap SVG di IE11.</p>

Memperbarui
Saya membuatnya bekerja dengan mengganti versi dari [email protected] ke [email protected].

// import the following 2
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"
                type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"
                type="text/javascript"></script>

Pertanyaan
Mungkinkah ada "html2canvas.svg.js" untuk versi "1.0.0-alpha.10" juga?

@Paul-Kijtapart Hai, saya juga menghadapi masalah yang sama, sudahkah Anda memperbaiki masalah Anda?
Saat ini proyek saya hanya berfungsi untuk internet explorer, edge, chrome, dan opera. Mencari [email protected] yang mendukung SVG karena HTML2PDF saya tidak berfungsi untuk firefox.

Saat ini jika saya menggunakan v1.0.0-alpha.11 (versi terbaru) tidak akan ada SVG yang ditampilkan pada file pdf.
Jika saya menggunakan 0.5.0-beta4, Firefox tidak akan menampilkan satu file pun. Saya melihat kode mereka terlalu sulit untuk saya mengerti

Hai @GoodJeans ,

Kemajuan
Saya akhirnya tidak menggunakan versi "0.5.0-beta4" karena tidak memiliki fitur "skala".

Percobaan
Saya baru-baru ini memperbarui versi ke "v1.0.0-alpha.11" yang, menurut changelog, harus memperbaiki kesalahan anggota IE11 tidak ditemukan.
Namun, bahkan dengan versi terbaru "v1.0.0-alpha.11", html2canvas tidak menangkap sebagian besar komponen SVG di IE11.

Memecahkan masalah
Menurut log yang disediakan oleh html2canvas, ini mungkin masalah yang sama dengan alpha.10,

Dengan Chrome:

1468ms html2canvas: Finished parsing node tree
1487ms html2canvas: Finished loading 3 images (3) [img, img, img]
1489ms html2canvas: Starting renderer

Dengan IE11

2137ms html2canvas: Starting node parsing
2451ms html2canvas: Finished parsing node tree
2455ms html2canvas: Finished loading 0 images 
2455ms html2canvas: Starting renderer

Dari log di atas, tidak seperti Chrome, IE11 gagal menangkap 3 gambar dari dom SVG.

@Paul-Kijtapart saya mengerti.. versi alpha yang saya gunakan tidak mendukung SVG di internet explorer sayangnya.. kira saya harus menunggu rilis berikutnya.

Saya sebenarnya menggunakan eKoopmans/html2pdf bersama dengan html2canvas.

Itu masih tidak berfungsi yaitu 11. Di bawah ini adalah Kode yang saya gunakan.

biarkan data = document.getElementById('contentToConvert');
html2canvas(data, {
dirender: fungsi (kanvas) {
biarkan imgWidth = 208;
biarkan tinggi halaman = 295;
biarkan imgHeight = canvas.height * imgWidth / canvas.width;
biarkan heightLeft = imgHeight;
const contentDataURL = kanvas.toDataURL('gambar/png')
biarkan pdf = new jspdf('p', 'mm', 'a4'); // halaman PDF ukuran A4
biarkan posisi = 0;
pdf.addImage(contentDataURL, 'PNG', 0, posisi, imgWidth, imgHeight)
pdf.save("testf .pdf'); // Membuat PDF
}
});

Saya memiliki masalah yang sama dan tidak berfungsi di IE 11. Apa yang saya coba lakukan adalah membuat file PDF untuk halaman laporan dengan beberapa grafik highchart (yaitu svg). Saya menggunakan html2canvas dan jspdf. ketika saya mengganti versi dari [email protected] ke [email protected] , itu dapat menampilkan grafik grafik tinggi, tetapi ada masalah lain seperti tata letak. Jika saya menggunakan [email protected] , semua grafik highchart akan kosong saat menghasilkan kanvas.

Saya menantikan rilis baru dengan perbaikan ini.

Ini masih menjadi masalah di 1.0.0-rc.1. IE11 tidak melihat grafik tinggi (svg canvas) sementara Chrome dan Firefox melakukannya.

Tampaknya masih menjadi masalah di 1.0.0-rc.3.

Setiap pembaruan tentang masalah ini?
Saya juga mendapatkan data grafik yang tidak teratur.

Saya telah memperbarui untuk menggunakan 1.0.0-rc.5. tapi tetap tidak bekerja.
Tuan Bill Gates, bisakah Anda segera mengumumkan akhir dukungan kepada IE? saya kemudian bisa menyerah ....

Ada berita? Hal terakhir yang saya butuhkan untuk proyek saya adalah pdf yang bagus di IE11.

masih tidak berfungsi di IE11 dengan svg. apakah ada yang punya solusi?

@kuldip27792
gunakan canvg terlebih dahulu, lalu gunakan html2canvas

rekan tim saya menyarankan alternatif, Anda dapat melihatnya sebagai opsi jika PDF Anda tidak harus dibuat secara real-time:

Langkah 1. Instal google-chrome
Langkah 2. Gunakan prompt perintah google-chrome untuk menangkap html yang dirender ke png/pdf

misalnya
chrome --headless --print-to-pdf="d:\{{path and file name}}.pdf" https://google.com

Dalam hal ini, PDF yang dihasilkan akan memiliki gaya yang sama, apa pun browser yang Anda gunakan.
Rumit tapi bekerja untuk saya.

@fiftyk saya mencoba melakukan itu tetapi itu juga berfungsi untuk chrome tetapi tidak untuk IE11.
@martinknc terima kasih atas sarannya, tetapi saya membutuhkan waktu nyata itu dalam proyek saya.

@ kuldip27792 kami akhirnya meluncurkan IE11 ke halaman yang dipreteli dengan tombol panggil saja ke

@fiftyk Saya sudah mencoba solusi Anda dan itu bekerja dengan baik. jadi yang saya lakukan adalah mengumpulkan semua elemen svg dan merendernya ke kanvas yang dibuat oleh html2canvas dengan nilai posisinya sendiri. Terima kasih banyak saudara.

yup, seperti ahmeturun, ini juga yang saya lakukan. Terlampir adalah fungsi TypeScript saya untuk membuat svgs dirender ke tangkapan layar:
`
impor { Canvg } dari 'canvg';
...
konversi pribadiSvgD3ChartsToPngs(): HTMLImageElement[] {
const pngD3Charts: HTMLImageElement[] = [];

Array.from(document.getElementsByTagName('svg')).map(svg => {
biarkan svgD3ChartCanvas = document.createElement('canvas');

        // Increase the Pixel Density for the Screenshot
        svgD3ChartCanvas.width = parseInt(svg.getAttribute('width')) * 4;
        svgD3ChartCanvas.height = parseInt(svg.getAttribute('height')) * 4;

        let canvasContext = svgD3ChartCanvas.getContext('2d');

        // Use Canvg to convert the svg into a png
        let convertedSvgToPng = Canvg.fromString(
            canvasContext,
            (svg.parentNode as HTMLElement).innerHTML,
            {
                ignoreDimensions: true,
                scaleWidth: svgD3ChartCanvas.width,
                scaleHeight: svgD3ChartCanvas.height
            }
        );
        convertedSvgToPng.start();

        // Attach new png
        let pngD3Chart = new Image();
        pngD3Chart.src = svgD3ChartCanvas.toDataURL('image/png');
        pngD3Chart.style.width = '100%';
        pngD3Charts.push(pngD3Chart);

        // Remove HTML Attribute and use CSS
        (pngD3Chart as any).width = '';
        svg.parentNode.parentNode.appendChild(pngD3Chart);
        (svg.parentNode as HTMLElement).style.visibility = 'hidden';
        (svg.parentNode as HTMLElement).style.height = '0';
        (svg.parentNode as HTMLElement).style.minHeight = '0';
    });
    return pngD3Charts;
}`