SpreadJS导出带图片的Excel

发布时间:2016/09/26 00:09 发布者:dexteryao

返回博客中心

SpreadJS导出Excel支持将图片导出,但是使用时需要注意导出图片需要为BASE64位图,本文介绍下如何将网路图片在前端转换为BASE64位图。

SpreadJS可以引用网络图片显示,但是由于服务器访问限制、跨域等问题ExcelIO无法将网络图片保存到Excel,所以我们Spread引用的图片需要使用Base64位图的引用。

这里我们借助canvas的toDataURL方法在前端将图片转换,下面代码将一个网路图片加载后添加到cansvs,然后使用toDataURL导出后添加到Spread,这样我们再toJSON并导出后就能在Excel中看到图片了。

 

var imageurl = "/wd.jpg"
var imgElement = $(document.createElement("img"));
imgElement.bind("load", function () {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL("image/png");
    sheet.addPicture("f2",dataURL,2,2,6,6);
});
imgElement[0].src = imageurl;

 

更多资源

SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网