html2canvas无法在FireFox和IE 11中使用Google Material Charts

Question

我想下载Google Material图表图片。但是现在材料图表中不支持函数getImageUri。所以我做了一些谷歌搜索，发现html2canvas lib这样做。下面提到的代码在Chrome中工作正常但在FireFox和IE中没有。

class staticVars{
    public static $host1 = null;
    public static $host2 = null;
    public static $host3 = null;
    public static $host4 = null;

    public static function initialize() {
        self::$host1 = (condition) ? 'www.host1.com' : 'www.host31.com';
    }
}
staticVars::initialize();

以上图片来自Firefox。在IE中只有空浏览器显示.. 任何人都可以帮我解决这个问题。

Answer 1

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

Answer 2

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');
                }
            }); 
        });

Answer 3

在捕获生成svg图表的海图图表时，我也遇到了IE11的类似问题。我们使用了将所有svg图像转换为画布的技术。将新创建的画布放在svg处。现在捕获dom并打印/下载。一旦完成打印/下载，请再次从dom移除画布。它正在开发chrome，FF和IE。 Google条形图是使用SVG或VML在浏览器中呈现的。因此，该技术也可以在Google图表中使用。