html2canvas is not able to capture a SVG in IE11.

[Paul-Kijtapart]

Specifications:

• html2canvas version tested with: 1.0.0-alpha.10
• Browser & version: Internet Explorer 11 & Version: 11.309.16299.0
• Operating system: Window 10

Bug reports:

Problem
html2canvas is not able to capture a SVG in IE11.

Steps to reproduce
Please see jsFiddle: https://jsfiddle.net/coolbean/ekshfuLz/17/

1. install html2canvas and es6promise

 var Promise = require('es6-promise').Promise;
 import html2canvas from "html2canvas";

1. Calls html2canvas on a DOM with SVG tag

html2canvas(SVGsource).then(function(canvas) {
  document.body.appendChild(canvas);
});

When I tried above in Chrome, html2canvas finished loading "1" images.
However, IE11 finishes loading "0" images.

1. As a result, the produced canvas is empty.

2. There is no error log,
   so I assume that this problem might be from incompatible syntax of SVG tag.

[Paul-Kijtapart]

Update
I am to make it work by switching version from [email protected] to [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
Could it be that there exists a "html2canvas.svg.js" for version "1.0.0-alpha.10" too?

[ghost]

@Paul-Kijtapart Hi I'm facing the same issue as well have you fixed your issue?
Currently my project works for internet explorer, edge, chrome and opera only. Looking for [email protected] that supports SVG as my HTML2PDF is not working for firefox.

Currently if I were to use v1.0.0-alpha.11(latest version) there won't be SVG displayed on the pdf file.
If I were to use 0.5.0-beta4, Firefox won't display a single file. I look into their codes it's too difficult for me to understand

[Paul-Kijtapart]

Hi @GoodJeans,

Progress
I ended up not using version "0.5.0-beta4" since it does not have "scale" feature.

Attempt
I have recently updated the version to "v1.0.0-alpha.11" which, according to the changelog, should fix IE11 member not found error.
However, even with this latest version "v1.0.0-alpha.11", html2canvas does not capture most of the SVG components in IE11.

Troubleshoot
According to the log provided by html2canvas, this is probably the same issues with alpha.10,

With Chrome:

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

With IE11

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

From the log above, unlike Chrome, IE11 fails to capture the 3 images from the SVG dom.

[ghost]

@Paul-Kijtapart I see.. the alpha version that I am using does not support the SVG on internet explorer unfortunately.. guess I will have to wait for a next release.

I'm actually using eKoopmans/html2pdf along with html2canvas.

[satish1020]

It is still not working in ie 11.Below is the Code I am using.

let data = document.getElementById('contentToConvert');
html2canvas(data, {
onrendered: function (canvas) {
let imgWidth = 208;
let 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 size page of PDF
let position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save("testf .pdf'); // Generated PDF
}
});

[tony-dnvgl]

I have the same issue and it's not working in IE 11. What I try to do is to generate the PDF file for the report page with some highchart graphs (which is svg). I am using html2canvas and jspdf. when I switch the version from [email protected] to [email protected], it can show the highchart graph, but there are others issues like layout. If I use [email protected], all the highchart graph will be empty when generate canvas.

I am looking forward to the new release with this fix.

[Lemonilla]

This is still an issue in 1.0.0-rc.1. IE11 doesn't see highcharts (svg canvas) while Chrome and Firefox do.

[d4sh]

Still seems to be an issue in 1.0.0-rc.3.

[OFAH]

Any update on this issue?
Also I am getting disordered graph data.

[ninjago2015]

I have updated to use 1.0.0-rc.5. but still not working.
Mr. Bill Gates can you please announce end-of-support to IE immediately? I can then give it up....

[Imogynn]

Any news? Last thing I need on my project is good pdfs in IE11.

[kuldip27792]

still not working in IE11 with svg. does anybody have any workaround?

[fiftyk]

@kuldip27792
use canvg first, and then use html2canvas

[martinknc]

my teammate suggests an alternative, you can view it as an option if your PDF is not a must to generate in real-time:

Step 1. Install google-chrome
Step 2. Use google-chrome command prompt to capture the rendered html to png/pdf

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

In that case the generated PDF will be in the same style no matter which browser you are using.
Tricky but work for me.

[kuldip27792]

@fiftyk i tried doing that but that also worked for chrome but not for IE11.
@martinknc thanks for suggestion but i need that real time in my project.

[Imogynn]

@kuldip27792 we ended up launching IE11 to a stripped down page with a button just call into screen shot. Not good but enough for our client.

[ahmeturun]

@fiftyk I've tried your solution and it worked great. so what I'm doing is I'm collecting all the svg elements and rendering them to the canvas created by html2canvas with their own position values. Thanks a lot brother.

[arielgelbard]

yup, like ahmeturun, this is what I do as well. Attached is my TypeScript function to make svgs render onto the screenshot:
`
import { Canvg } from '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;
}`