highchart导出图片

http://www.cnblogs.com/jasondan/p/3504120.html

 

项目中需求导出报表为图片存到Excel中去，或供其它页面调用。

开始存到截屏，但由于用户电脑分辨率不一样，不好处理。

后来看官方用SVG Rendering Library（其实就一Svg.dll文件）这个在后处理保存为图片然后到前台输出。

这样是可以导出了。但有时不想显示右上脚的导出按钮，直接在下一步的其它操作时并行导出。

自己写了提交SVG数据post到后台，但到后台的svg数据和官方的不一致。后来看exporting.js文件

发现传到后台之前做了好多处理：

b = b.replace(/zIndex="[^"]+"/g, "")
.replace(/isShadow="[^"]+"/g, "")
.replace(/symbolName="[^"]+"/g, "")
.replace(/jQuery[0-9]+="[^"]+"/g, "")
.replace(/url\([^#]+#/g, "url(#")
.replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
.replace(/ href=/g, " xlink:href=")
.replace(/\n/, " ")
.replace(/<\/svg>.*?$/, "</svg>")
.replace(/&nbsp;/g, " ")
.replace(/&shy;/g, "­")
.replace(/<IMG /g, "<image ")
.replace(/height=([^" ]+)/g, 'height="$1"')
.replace(/width=([^" ]+)/g, 'width="$1"')
.replace(/hc-svg-href="([^"]+)">/g, 'xlink:href="$1"/>')
.replace(/id=([^" >]+)/g, 'id="$1"')
.replace(/class=([^" >]+)/g, 'class="$1"')
.replace(/ transform /g, " ")
.replace(/:(path|rect)/g, "$1")
.replace(/style="([^"]+)"/g, function (a) {
return a.toLowerCase()
});
return b = b.replace(/(url\(#highcharts-[0-9]+)&quot;/g, "$1").replace(/&quot;/g, "'")
}, exportChart: function (c, a) {
var c = c || {}, d = this.options.exporting, d = this.getSVG(o({ chart: { borderRadius: 0 } }, d.chartOptions, a, {
exporting: {
sourceWidth: c.sourceWidth ||
d.sourceWidth, sourceHeight: c.sourceHeight || d.sourceHeight
}
})),
c = o(this.options.exporting, c);
f.post(c.url, {
filename: c.filename || "chart",
type: c.type,
width: c.width || 0,
scale: c.scale || 2,
svg: d
})

 

 

后来放弃了自己写方法的方式。

最后还是隐藏导出按钮，用web自动化的思想去调它自己的接口方法。

$(function () {
$("#submit").click(function () {
alert(1);
$(".highcharts-button").click();
$(".highcharts-contextmenu").children().children().eq(2).click();

// $(".highcharts-contextmenu").children().children().eq(2).click();
// alert($("#container svg"));
// $.ajax({
// url: '@Url.Content("~/Handlers/ChartExportHandler.ashx")',
// data: { svg: $("#container2").children().html(), filename: 'chart', type: 'image/jpeg', width: 1200 },
// dataType: 'text',
// async: true,
// type: "POST",
// success: function (msg) {

// if (msg == "True") {
// $('#reportTable').datagrid("reload");
// //$the.attr("src", url);
// }
// }
// });
})