Spread JS 怎样实现将chart导出为图片

收藏

大家知道，SpreadJS中的chart无法脱离SpreadJS单独展示，有时需要能够让用户看到图表，但不需要加载整个表格，这时可以考虑用生成图片的方式保存图表。
本文介绍怎样把SpreadJS中的图表转为base64格式的字符串，供我们接下来使用。

一、获取所有chart的渲染结果：
SpreadJS的chart是浮动对象的一种，浮动对象是按需加载的，所以要批量生成chart的图片，必须先激活它们。

// 需要激活图片的渲染，然后再执行导出
spread.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, function (e, info) {
var sheet = info.sheet;
var floatingObject = info.floatingObject;
var canvas = $(floatingObject.getHost()).find("canvas")[0]
if(canvas){
var image = new Image()
image.src = canvas.toDataURL("image/png")
//console.log(image.src);
pics.push(image.src);
}
});

复制代码

二、把激活的chart中的canvas获取到后，转为image对象，生成base64：

$("#convert").click(function(){
var sheet = spread.getActiveSheet();
var chart = sheet.charts.all()[0]
var canvas = $(chart.getHost()).find("canvas")[0]
var image = new Image()
image.src = canvas.toDataURL("image/png")
console.log(image.src);
alert("操作完成，请查看控制台");
})

复制代码

完整实例参考附件。

		自动登录	找回密码
密码			立即注册

Spread JS 怎样实现将chart导出为图片

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章