Question

我试图将通过XSL创建的dhtmlxChart导出到图像，以便人们可以保存它。（导出到MS excel失败）

图表构建正常且工作正常，因此我添加了一个按钮＆＃34;另存为图片＆＃34;应该从正文创建一个画布并在新页面中打开它。

当我尝试运行它时，它会出错： SCRIPT438：对象不支持属性或方法＆＃39; getComputedStyle＆＃39; html2canvas.js，第2269行第5个字符

这是我的xsl代码：

<xsl:stylesheet version='2.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:decimal-format name="format" grouping-separator="." decimal-separator=","/>

<!-- Declaratie variabelen -->
<!-- Globale variabelen -->
    <xsl:variable name="VarMaand"><xsl:value-of select="//rows/row[last()]/@Maand" /></xsl:variable>
    <xsl:variable name="VarJaar"><xsl:value-of select="//rows/row[last()]/@Jaar" /></xsl:variable>
<!-- Einde Declaratie variabelen -->

    <xsl:template match="/">
        <html>
            <style>
                td  {   border:1px;
                        border-style:solid;
                        border-color:#000000;
                        height:20px;
                        text-align:center;
                    }
            </style>
            <head>
                <script src="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.js" type="text/javascript"></script>
                <link rel="STYLESHEET" type="text/css" href="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.css"/>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
                <script src="/LIB/JS/html2canvas.js" type="text/javascript"></script>

            </head>
            <body>
                <script>
                    var chart;
                    window.onload = function() {
                        chart = new dhtmlXChart({
                            view:"stackedBar",
                            container:"chart1",
                            value:"#Value1#",
                            width:10,
                        xAxis:{lines: false,template:function(obj, common, data){
                                if (obj.Maand%2) 
                                {if (obj.Maand &lt; 10) return "0"+obj.Maand+"/"+(obj.Jaar-2000);
                                            return obj.Maand+"/"+(obj.Jaar-2000);}
                                    return "";
                            }},
                            yAxis:{start:27000,step:500,end:37500},
                            color:"#0070C0"
                        });
                        chart.addSeries({value:"#Value2#",color:"#00B0F0"});
                        chart.addSeries({value:"#Value3#",color:"#00B050"});
                        chart.addSeries({value:"#Value4#",color:"#92D050"});
                        chart.addSeries({value:"#Value5#",color:"#C3D69B"});        
                        chart.addSeries({value:"#Value6#",color:"#D9D9D9"});
                        chart.addSeries({value:"#Value7#",color:"#BFBFBF"});
                        chart.addSeries({value:"#Value8#",color:"#7F7F7F"});
                        chart.addSeries({view:"spline",item:{radius:0,type:"square",color:"#000000"},line:{color:"#000000",width:2},value:"#Value9#"});
                        chart.load("../../../ProcessDescriptor/descriptor/L1/HRB/HRB_Foto_Grafiek_Data.xml",function(){},"xml")
                    }

                    function Capture()
                    {
                        html2canvas(document.body, {
                            logging:true,
                            onrendered: function(canvas) {
                            var img = canvas.toDataURL()
                                window.open(img);
                            }
                        });
                    }

                </script>
                <div id="main" style="width:100%;height:100%;">
                <div id="Picture" style="width:20%;height:75%;float:left;text-align:center;">
                        <br /><img src="/LIB/IMAGE/HRB/Divers/MindTheGap.png"/><br /><br />
                        <button onclick="Capture()">Save as Pic</button>
                </div>      
                <div id="chart1" style="width:75%;height:75%;float:right;font-family:sans-serif;"></div>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

我从html2canvas获得的唯一日志是：日志：html2canvas：预加载开始：查找背景图像在此日志条目之后，我收到上述错误消息。

谁能告诉我为什么这不起作用？我试图在IE9中运行（由公司提供，不能更改）我应该在脑袋中加入更多的js吗？

由于

Answer 1

这是html2canvas.js和IE的已知问题 - 请参阅html2canvas.js not Working in IE9/10/11。我刚刚检查了当前版本html2canvas on github，以防您可能使用旧版本，但他们仍然至少有一行调用getComputedStyle。

getComputedStyle的问题是几个IE版本不支持此功能，例如在caniuse上声明它只是IE8不支持 - caniuse getcomputedstyle。

下一个问题可能是您公司使用的IE9版本 - 您可以轻松检查getComputedStyle是否在那里工作，但是当错误发生时，请不要猜测。因此，我建议采用两种解决方法：如果您不使用当前版本的html2canvas.js，请检查它是否适合您使用新版本。如果没有，如上所述，函数NodeContainer.prototype.computedStyle中只有一行 - 534行 - 调用此函数，看起来当前版本可能会处理不支持getComputedStyle的情况。

如果当前的html2canvas.js不适合您，您可以尝试为此缺失函数添加修复程序。我们不会在这里详细介绍，因为它可能已经解决了您的问题，无法更新到当前版本，但是google＆＃34; getcomputedstyle for ie＆＃34;你会找到几个提供js-snippets的资源来添加＆＃34;添加＆＃34;这个函数用于IE（=一个名为getComputedStyle的函数，适用于IE，被添加到窗口对象中，可能会导致与原始函数相同的结果）。虽然有些评论指出建议的修复程序不起作用，但是如果至少你的脚本在IE9上运行或者是否会有其他问题，则可以检查。

使用html2Canvas导出dhtmlxChart

1 个答案: