请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

KevinChen 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-11-3 18:35  /   查看:2540  /  回复:0
大家知道,SpreadJS中的chart无法脱离SpreadJS单独展示,有时需要能够让用户看到图表,但不需要加载整个表格,这时可以考虑用生成图片的方式保存图表。
本文介绍怎样把SpreadJS中的图表转为base64格式的字符串,供我们接下来使用。

一、获取所有chart的渲染结果:
SpreadJS的chart是浮动对象的一种,浮动对象是按需加载的,所以要批量生成chart的图片,必须先激活它们。
  1. // 需要激活图片的渲染,然后再执行导出
  2.         spread.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, function (e, info) {
  3.                 var sheet = info.sheet;
  4.                 var floatingObject = info.floatingObject;
  5.                 var canvas = $(floatingObject.getHost()).find("canvas")[0]
  6.                 if(canvas){
  7.                         var image = new Image()
  8.                         image.src = canvas.toDataURL("image/png")
  9.                         //console.log(image.src);
  10.                         pics.push(image.src);
  11.                 }
  12.         });
复制代码



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

  1. $("#convert").click(function(){
  2.                 var sheet = spread.getActiveSheet();
  3.                 var chart = sheet.charts.all()[0]
  4.                 var canvas = $(chart.getHost()).find("canvas")[0]
  5.                 var image = new Image()
  6.                 image.src = canvas.toDataURL("image/png")
  7.                 console.log(image.src);
  8.                 alert("操作完成,请查看控制台");
  9.         })
  10.        
复制代码



完整实例参考附件。

将chart导出为图片image.zip

2.96 KB, 下载次数: 27

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部