Javascript 使用html2Canvas导出dhtmlxChart
我正在尝试将通过XSL创建的dhtmlxChart导出到图像中，以便人们可以保存它。（导出到MS excel失败） 该图表构建正确，工作正常，因此我添加了一个按钮“另存为图片”，该按钮将从主体创建画布，并在新页面中打开它 当我尝试运行它时，它会给出一个错误： SCRIPT438:对象不支持属性或方法“getComputedStyle” html2canvas.js，第2269行，字符5 以下是我的xsl代码：Javascript 使用html2Canvas导出dhtmlxChart,javascript,jquery,xslt,dhtmlx,html2canvas,Javascript,Jquery,Xslt,Dhtmlx,Html2canvas,我正在尝试将通过XSL创建的dhtmlxChart导出到图像中，以便人们可以保存它。（导出到MS excel失败） 该图表构建正确，工作正常，因此我添加了一个按钮“另存为图片”，该按钮将从主体创建画布，并在新页面中打开它 当我尝试运行它时，它会给出一个错误： SCRIPT438:对象不支持属性或方法“getComputedStyle” html2canvas.js，第2269行，字符5 以下是我的xsl代码： 边界：1px； 边框样式：实心； 边框颜色：#000000； 高度：20px； 文
边界：1px；
边框样式：实心；
边框颜色：#000000；
高度：20px；
文本对齐：居中；
}
var图；
window.onload=函数（）{
chart=新的dhtmlXChart({
视图：“stackedBar”，
容器：“图表1”，
值：“#值1#”，
宽度：10，
xAxis:{lines:false，template:function（obj，common，data）{
如果（对象和%2）
{if（obj.Maand 10）返回“0”+obj.Maand+“/”+（obj.Jaar-2000）；
返回obj.Maand+“/”+（obj.Jaar-2000）；}
返回“”；
}},
yAxis:{开始：27000，步骤：500，结束：37500}，
颜色：“0070C0”
});
addSeries（{value:#Value2#“”，颜色：#00B0F0}）；
chart.addSeries（{value:#Value3#“”，颜色：#00B050}）；
addSeries（{value:#Value4#“，颜色：#92D050}）；
addSeries（{value:#Value5#“”，颜色：#C3D69B}）；
chart.addSeries（{value:#Value6#“，color:#D9D9D9}）；
addSeries（{value:#Value7#“”，颜色：#bfbf}）；
chart.addSeries（{value:#Value8#“”，颜色：#7F7F7F}）；
图表.addSeries（{视图：“样条线”，项：{半径：0，类型：“正方形”，颜色：{000000}，行：{颜色：{000000]，宽度：2}，值：{Value9}）；
load（“../../../ProcessDescriptor/descriptor/L1/HRB/HRB_Foto_Grafiek_Data.xml”，function（）{}，“xml”）
}
函数捕获（）
{
html2canvas（document.body{
日志记录：是的，
onrendered：函数（画布）{
var img=canvas.toDataURL（）
窗口打开（img）；
}
});
}
另存为图片
谢谢这是html2canvas.js和IE的一个已知问题-请参阅。我刚刚检查了当前版本，以防您可能正在使用旧版本，但它们至少还有一行代码调用getComputedStyle getComputedStyle的问题在于，该函数不受多个IE版本的支持，尽管例如在caniuse上，它只受IE8-的支持 下一个问题可能是你公司使用的IE9版本——你可以很容易地检查getComputedStyle是否在那里工作，但当错误发生时，我猜不会。因此，我建议两种解决方法：如果您没有使用当前版本的html2canvas.js，请检查新版本是否适合您。如果没有，如前所述，函数
NodeContainer.prototype.computedStyle如果当前的html2canvas.js对您不起作用，您可以尝试添加此缺失函数的修复程序。这里不会详细介绍，因为它可能已经解决了您更新到当前版本的问题，但是如果您使用google“getcomputedstyle for ie”，您会发现一些资源提供了js代码片段来“添加”ie的此功能（=一个名为getComputedStyle的函数，该函数适用于IE，被添加到窗口对象中，并可能导致与原始函数相同的结果）。虽然有些评论指出建议的修复程序无法运行，但可以检查您的脚本是否在IE9上运行，或者是否存在其他问题。嘿，感谢您的回答，我尝试替换了html2canvas.js文件，但现在我没有收到错误“getcomputedstyle”。事实上，我什么都没有收到。它只是ls我的函数'capture（）'就是这样。我没有在新窗口中获得图像，但也没有收到错误消息。我是否正确调用了html2canvas？一点尝试和错误告诉我，我的页面将进入怪癖模式（如果不在该模式下，我的dhtmlx将无法工作）html2canvas在怪癖模式下似乎不起作用。如果我创建一个小页面来在正常模式下尝试html2canvas，它工作得很好。即使如此，我仍然无法在新窗口中创建画布，append工作得很好，在新窗口中它会打开一个新选项卡，就是这样…url是string64，但页面仍然是空的…e
<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 < 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>