Derrick.Jiao 发表于 2021-9-15 08:59:46

实现选择图片插入功能

相信用过我们在线表格编辑器的伙伴都知道,可以通过按钮来实现选择图片并插入的功能。那么这次的分享将会和大家一起实现在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]
查看完整版本: 实现选择图片插入功能