<p>html2canvas kann im IE11 kein SVG erfassen.</p>

Aktualisieren
Ich soll es zum Laufen bringen , indem ich die Version von [email protected] auf [email protected] umstelle.

// 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>

Frage
Könnte es sein, dass es auch für die Version "1.0.0-alpha.10" eine "html2canvas.svg.js" gibt?

@Paul-Kijtapart Hallo, ich stehe auch vor dem gleichen Problem, hast du dein Problem behoben?
Derzeit funktioniert mein Projekt nur für Internet Explorer, Edge, Chrome und Opera. Suche nach [email protected] , das SVG unterstützt, da mein HTML2PDF für Firefox nicht funktioniert.

Wenn ich v1.0.0-alpha.11 (neueste Version) verwenden würde, wird derzeit kein SVG in der PDF-Datei angezeigt.
Wenn ich 0.5.0-beta4 verwenden würde, zeigt Firefox keine einzige Datei an. Ich schaue in ihre Codes, es ist zu schwer für mich, sie zu verstehen

Hallo @GoodJeans ,

Fortschritt
Ich habe die Version "0.5.0-beta4" nicht verwendet, da sie keine "Skalierungsfunktion" hat.

Versuch
Ich habe vor kurzem die Version auf "v1.0.0-alpha.11" aktualisiert, was laut Changelog den Fehler IE11 Member not found beheben sollte.
Aber selbst mit dieser neuesten Version "v1.0.0-alpha.11" erfasst html2canvas die meisten SVG-Komponenten in IE11 nicht.

Fehlerbehebung
Laut dem von html2canvas bereitgestellten Protokoll handelt es sich wahrscheinlich um die gleichen Probleme wie bei alpha.10,

Mit Chrom:

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

Mit IE11

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

Aus dem obigen Protokoll geht hervor, dass IE11 im Gegensatz zu Chrome die 3 Bilder aus dem SVG-Dom nicht erfasst.

@Paul-Kijtapart Ich sehe.. die Alpha-Version, die ich verwende, unterstützt leider das SVG im Internet Explorer nicht.. Ich denke, ich muss auf eine nächste Version warten.

Ich verwende eigentlich eKoopmans/html2pdf zusammen mit html2canvas.

Es funktioniert immer noch nicht in zB 11. Unten ist der Code, den ich verwende.

let data = document.getElementById('contentToConvert');
html2canvas(Daten, {
aufgerendert: Funktion (Leinwand) {
sei imgWidth = 208;
lassen 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'); // A4-Seite von PDF
lassen Position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, Position, imgWidth, imgHeight)
pdf.save("testf .pdf'); // Generiertes PDF
}
});

Ich habe das gleiche Problem und es funktioniert nicht in IE 11. Ich versuche, die PDF-Datei für die Berichtsseite mit einigen Highchart-Diagrammen (svg) zu generieren. Ich verwende html2canvas und jspdf. Wenn ich die Version von [email protected] auf [email protected] wechsele , kann das Highchart-Diagramm angezeigt werden, aber es gibt andere Probleme wie das Layout. Wenn ich [email protected] verwende , ist das gesamte Highchart-Diagramm beim Generieren von Canvas leer.

Ich freue mich auf die neue Version mit diesem Fix.

Dies ist immer noch ein Problem in 1.0.0-rc.1. IE11 sieht keine Highcharts (svg-Canvas), während Chrome und Firefox dies tun.

Scheint immer noch ein Problem in 1.0.0-rc.3 zu sein.

Irgendein Update zu diesem Thema?
Außerdem erhalte ich ungeordnete Diagrammdaten.

Ich habe aktualisiert, um 1.0.0-rc.5 zu verwenden. funktioniert aber immer noch nicht.
Mr. Bill Gates, können Sie IE bitte umgehend das Ende des Supports ankündigen? dann kann ich darauf verzichten....

Irgendwelche Neuigkeiten? Das letzte, was ich für mein Projekt brauche, sind gute PDFs in IE11.

funktioniert immer noch nicht in IE11 mit svg. hat jemand eine Abhilfe?

@kuldip27792
Verwenden Sie zuerst

Mein Teamkollege schlägt eine Alternative vor, die Sie als Option anzeigen können, wenn Ihr PDF nicht in Echtzeit generiert werden muss:

Schritt 1. Installieren Sie Google-Chrome
Schritt 2. Verwenden Sie die Google-Chrome-Eingabeaufforderung, um das gerenderte HTML in png/pdf zu erfassen

z.B
chrome --headless --print-to-pdf="d:\{{Pfad und Dateiname}}.pdf" https://google.com

In diesem Fall hat das generierte PDF den gleichen Stil, egal welchen Browser Sie verwenden.
Schwierig, aber funktioniert für mich.

@fiftyk Ich habe das versucht, aber das hat auch für Chrome funktioniert, aber nicht für IE11.
@martinknc danke für den Vorschlag, aber ich brauche diese Echtzeit in meinem Projekt.

@kuldip27792 Am Ende haben wir IE11 auf einer abgespeckten Seite mit einer Schaltfläche gestartet, die Sie einfach in den Screenshot aufrufen. Nicht gut, aber genug für unseren Kunden.

@fiftyk Ich habe deine Lösung ausprobiert und es hat

Ja, wie Ahmeturun mache ich das auch. Anbei ist meine TypeScript-Funktion, um SVGs auf den Screenshot zu rendern:
`
import { Canvg } from 'canvg';
...
privat 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;
}`