<p>html2canvas no puede capturar un SVG en IE11.</p>

Actualizar
Debo hacerlo funcionar cambiando la versión de [email protected] a [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>

Pregunta
¿Podría ser que también exista un "html2canvas.svg.js" para la versión "1.0.0-alpha.10"?

@ Paul-Kijtapart Hola, estoy enfrentando el mismo problema. ¿Has solucionado tu problema?
Actualmente, mi proyecto funciona solo para Internet Explorer, Edge, Chrome y Opera. Buscando [email protected] que admita SVG ya que mi HTML2PDF no funciona para Firefox.

Actualmente, si tuviera que usar v1.0.0-alpha.11 (última versión), no se mostrará SVG en el archivo pdf.
Si tuviera que usar 0.5.0-beta4, Firefox no mostrará un solo archivo. Miro sus códigos, es demasiado difícil para mí entender

Hola @GoodJeans ,

Progreso
Terminé sin usar la versión "0.5.0-beta4" ya que no tiene la función de "escala".

Intento
Recientemente actualicé la versión a "v1.0.0-alpha.11" que, según el registro de cambios, debería corregir el error de miembro no encontrado de IE11.
Sin embargo, incluso con esta última versión "v1.0.0-alpha.11", html2canvas no captura la mayoría de los componentes SVG en IE11.

Solucionar problemas
Según el registro proporcionado por html2canvas, probablemente se trate de los mismos problemas con alpha.10,

Con Chrome:

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

Con IE11

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

Desde el registro anterior, a diferencia de Chrome, IE11 no captura las 3 imágenes del dom de SVG.

@ Paul-Kijtapart Ya veo ... la versión alfa que estoy usando no es compatible con SVG en Internet Explorer desafortunadamente ... supongo que tendré que esperar a una próxima versión.

De hecho, estoy usando eKoopmans / html2pdf junto con html2canvas.

Todavía no funciona en ie 11. A continuación se muestra el código que estoy usando.

dejar datos = document.getElementById ('contentToConvert');
html2canvas (datos, {
onrendered: function (lienzo) {
deje imgWidth = 208;
let pageHeight = 295;
let imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL ('imagen / png')
let pdf = new jspdf ('p', 'mm', 'a4'); // Página de tamaño A4 de PDF
let position = 0;
pdf.addImage (contentDataURL, 'PNG', 0, posición, imgWidth, imgHeight)
pdf.save ("testf .pdf '); // PDF generado
}
});

Tengo el mismo problema y no funciona en IE 11. Lo que trato de hacer es generar el archivo PDF para la página del informe con algunos gráficos highchart (que es svg). Estoy usando html2canvas y jspdf. cuando cambio la versión de [email protected] a [email protected] , puede mostrar el gráfico highchart, pero hay otros problemas como el diseño. Si utilizo [email protected] , todo el gráfico highchart estará vacío cuando genere lienzo.

Espero con ansias la nueva versión con esta solución.

Esto sigue siendo un problema en 1.0.0-rc.1. IE11 no ve gráficos altos (lienzo svg) mientras que Chrome y Firefox sí lo hacen.

Todavía parece ser un problema en 1.0.0-rc.3.

¿Alguna actualización sobre este tema?
También obtengo datos de gráficos desordenados.

He actualizado para usar 1.0.0-rc.5. pero aún no funciona.
Sr. Bill Gates, ¿podría anunciar el fin del soporte a IE de inmediato? Entonces puedo dejarlo ...

¿Hay noticias? Lo último que necesito en mi proyecto son buenos archivos PDF en IE11.

todavía no funciona en IE11 con svg. ¿Alguien tiene alguna solución?

@ kuldip27792
use canvg primero, y luego use html2canvas

mi compañero de equipo sugiere una alternativa, puede verla como una opción si su PDF no es obligatorio para generar en tiempo real:

Paso 1. Instala google-chrome
Paso 2. Utilice el símbolo del sistema de google-chrome para capturar el html renderizado en png / pdf

p.ej
chrome --headless --print-to-pdf = "d: \ {{ruta y nombre de archivo}}. pdf" https://google.com

En ese caso, el PDF generado tendrá el mismo estilo, independientemente del navegador que esté utilizando.
Difícil, pero funciona para mí.

@fiftyk intenté hacer eso, pero eso también funcionó para Chrome pero no para IE11.
@martinknc gracias por la sugerencia, pero necesito ese tiempo real en mi proyecto.

@ kuldip27792 terminamos lanzando IE11 a una página

@fiftyk Probé tu solución y funcionó muy bien. así que lo que estoy haciendo es recopilar todos los elementos svg y representarlos en el lienzo creado por html2canvas con sus propios valores de posición. Muchas gracias hermano.

sí, como ahmeturun, esto es lo que hago también. Se adjunta mi función de TypeScript para hacer que los svgs se representen en la captura de pantalla:
'
importar {Canvg} desde 'canvg';
...
convertSvgD3ChartsToPngs privado (): HTMLImageElement [] {
const pngD3Charts: HTMLImageElement [] = [];

Array.from (document.getElementsByTagName ('svg')). Map (svg => {
let svgD3ChartCanvas = document.createElement ('lienzo');

        // 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;
}`