实现选择图片插入功能
相信用过我们在线表格编辑器的伙伴都知道,可以通过按钮来实现选择图片并插入的功能。那么这次的分享将会和大家一起实现在SpreadJS下选择图片并插入的功能。整体实现效果也如下图
代码方面也较为简单,核心代码如下。我们想要根据我们选择的单元格位置插入图片,需要获取当前活跃单元格的横纵坐标与行高列宽。读取文件后将其转为base64的形式。最后通过add方法将图片插入到指定的单元格。
startRow = sheet.getActiveRowIndex();
startCol = sheet.getActiveColumnIndex();
rowHeight = sheet.getRowHeight();
colWidth = sheet.getColumnWidth();
file = document.getElementById("fileDemo").files;
reader = new FileReader();
reader.readAsDataURL(file);//异步读取文件内容,结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function (e) {
timestamp = Date.parse(new Date());
picture = sheet.pictures.add(timestamp.toString(), this.result, startCol * colWidth, startRow * rowHeight);
}
下载附件即可查看完整demo。
页:
[1]