CODEWITHSUNDEEP
google-visualization
Innovative Thinker
Innovative Thinker

Reputation: 1795

html2canvas not working in FireFox and IE 11 for Google Material Charts

I want to download the Google Material charts image. But the function getImageUri not supported in material charts right now. So i did some google search and found out html2canvas lib for doing this. the below mentioned code working fine in Chrome but not in FireFox and IE.

     html2canvas($(".Tab1"), {
            onrendered: function(canvas) {
                var myImage = canvas.toDataURL("image/png");
                window.open(myImage);
                }
});

enter image description here

The above picture taken from Firefox. In IE only empty browser showing.. Can anyone help me to resolve this issue.

Upvotes: 1

Views: 3411

Answers (3)

MukundK
MukundK

Reputation: 86

I have faced the similar issue with IE11 while capturing the highchart charts which generates the svg charts. We used the technique of converting all svg images to canvas. Place the newly created canvas at svg. Now capture the dom and print/download it. Once print/download is done remove the canvas from dom again. It was working on chrome, FF and IE. Google bar charts are rendered in the browser using SVG or VML. So this technique will also work with Google Charts.

Upvotes: 0

Innovative Thinker
Innovative Thinker

Reputation: 1795

The Below Fix Make it working in IE as well (Tested with IE 10)

This seems to be a parsing error, if I add the following lines at the beginning of the 'svg.parseXml' function my code now works.

// -- Internet Explorer trick, otherwise an error is generated in the 'parseFromString' function when 
// -- You use declarations, this is the case for Raphael
xml = xml.replace(/xmlns=\"http:\/\/www.w3.org\/2000\/svg\"/, '');

Ref: https://github.com/gabelerner/canvg/issues/189

Upvotes: 1

Innovative Thinker
Innovative Thinker

Reputation: 1795

The below mentioned code working fine in firefox but not in IE
$('.pngexport').click(function () {
            canvg();
            //saves the d3.js as a png
            html2canvas($('.Tab1'), {
            useCORS: true,
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    //////////////////////////
                    var download = document.createElement('a');
                    download.href = img;     
                    download.download = 'Vendor.png';
                    download.click();
                    function fireEvent(obj, evt) {
                        var fireOnThis = obj;
                        if (document.createEvent) {
                            var evObj = document.createEvent('MouseEvents');
                            evObj.initEvent(evt, true, false);
                            fireOnThis.dispatchEvent(evObj);
                        } else if (document.createEventObject) {
                            var evObj = document.createEventObject();
                            fireOnThis.fireEvent('on' + evt, evObj);
                        }
                    }
                    fireEvent(download, 'click');
                }
            }); 
        });

Upvotes: 0

Related Questions