SpreadJS导出带图片的Excel - 葡萄城技术博客

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

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。