<p>html2canvas n'est pas capable de capturer un SVG dans IE11.</p>

Mettre à jour
Je dois le faire fonctionner en changeant de version de [email protected] à [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>

Question
Se pourrait-il qu'il existe également un "html2canvas.svg.js" pour la version "1.0.0-alpha.10" ?

@Paul-Kijtapart Bonjour, je suis également confronté au même problème, avez-vous résolu votre problème ?
Actuellement, mon projet fonctionne uniquement pour Internet Explorer, Edge, Chrome et Opera. Vous recherchez [email protected] qui prend en charge SVG car mon HTML2PDF ne fonctionne pas pour firefox.

Actuellement, si je devais utiliser v1.0.0-alpha.11 (dernière version), il n'y aura pas de SVG affiché sur le fichier pdf.
Si je devais utiliser 0.5.0-beta4, Firefox n'affichera pas un seul fichier. Je regarde dans leurs codes c'est trop difficile pour moi de comprendre

Salut @GoodJeans ,

Le progrès
J'ai fini par ne pas utiliser la version "0.5.0-beta4" car elle n'a pas de fonction "scale".

Tentative
J'ai récemment mis à jour la version vers "v1.0.0-alpha.11" qui, selon le journal des modifications, devrait corriger l'erreur de membre IE11 introuvable.
Cependant, même avec cette dernière version "v1.0.0-alpha.11", html2canvas ne capture pas la plupart des composants SVG dans IE11.

Dépannage
D'après le journal fourni par html2canvas, il s'agit probablement des mêmes problèmes avec alpha.10,

Avec Chrome :

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

Avec IE11

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

D'après le journal ci-dessus, contrairement à Chrome, IE11 ne parvient pas à capturer les 3 images du dom SVG.

@Paul-Kijtapart Je vois... la version alpha que j'utilise ne prend malheureusement pas en charge le SVG sur Internet Explorer... je suppose que je devrai attendre une prochaine version.

J'utilise actuellement eKoopmans/html2pdf avec html2canvas.

Il ne fonctionne toujours pas, c'est-à-dire 11. Ci-dessous se trouve le code que j'utilise.

let data = document.getElementById('contentToConvert');
html2canvas(données, {
rendu : fonction (canevas) {
laissez imgWidth = 208;
laissez pageHeight = 295;
let imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // Page de format A4 de PDF
laissez position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save("testf .pdf'); // PDF généré
}
});

J'ai le même problème et cela ne fonctionne pas dans IE 11. Ce que j'essaie de faire est de générer le fichier PDF pour la page de rapport avec des graphiques highchart (qui est svg). J'utilise html2canvas et jspdf. lorsque je change la version de [email protected] à [email protected] , il peut afficher le graphique highchart, mais il y a d'autres problèmes comme la mise en page. Si j'utilise [email protected] , tout le graphique highchart sera vide lors de la génération de canvas.

J'attends avec impatience la nouvelle version avec ce correctif.

C'est toujours un problème dans la version 1.0.0-rc.1. IE11 ne voit pas les highcharts (svg canvas) contrairement à Chrome et Firefox.

Cela semble toujours être un problème dans la version 1.0.0-rc.3.

Une mise à jour sur ce problème?
Je reçois également des données graphiques désordonnées.

J'ai mis à jour pour utiliser 1.0.0-rc.5. mais ne fonctionne toujours pas.
M. Bill Gates, pouvez-vous s'il vous plaît annoncer la fin du support à IE immédiatement ? Je peux alors y renoncer...

Des nouvelles? La dernière chose dont j'ai besoin sur mon projet est de bons pdfs dans IE11.

ne fonctionne toujours pas dans IE11 avec svg. est-ce que quelqu'un a une solution de contournement ?

@kuldip27792
utilisez d'abord canvg , puis utilisez html2canvas

mon coéquipier propose une alternative, vous pouvez la visualiser en option si votre PDF n'est pas indispensable à générer en temps réel :

Étape 1. Installez google-chrome
Étape 2. Utilisez l'invite de commande google-chrome pour capturer le html rendu en png/pdf

par exemple
chrome --headless --print-to-pdf="d:\{{chemin et nom de fichier}}.pdf" https://google.com

Dans ce cas, le PDF généré sera dans le même style, quel que soit le navigateur que vous utilisez.
Difficile mais travaille pour moi.

@fiftyk j'ai essayé de le faire mais cela a également fonctionné pour Chrome mais pas pour IE11.
@martinknc merci pour la suggestion mais j'ai besoin de ce temps réel dans mon projet.

@ kuldip27792 nous avons fini par lancer IE11 sur une page simplifiée avec un bouton qui vient d'être appelé dans la capture d'écran. Pas bon mais suffisant pour notre client.

@fiftyk J'ai essayé votre solution et cela a très bien fonctionné. donc ce que je fais, c'est que je collecte tous les éléments svg et les rend sur le canevas créé par html2canvas avec leurs propres valeurs de position. Merci beaucoup frère.

ouais, comme Ahmeturun, c'est ce que je fais aussi. Ci-joint ma fonction TypeScript pour rendre les svgs sur la capture d'écran :
`
importer { Canvg } depuis 'canvg' ;
...
private convertSvgD3ChartsToPngs() : HTMLImageElement[] {
const pngD3Charts : HTMLImageElement[] = [] ;

Array.from(document.getElementsByTagName('svg')).map(svg => {
let 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;
}`