图片列表放置到单元格，预览时可以显示图片，excel导出显示不了

Clark.Pan

本帖最后由 Richard.Huang 于 2023-12-28 11:13 编辑

产品：SpreadJS
版本：V15.1.0

图片列表放置到单元格，预览时可以显示图片，excel导出显示不了 image.png379044494.png

显示图片的方法如下：addPics(sheet, picList, index) {
sheet.addRows(index+1, picList.length*2);
for (let i=0; i<picList.length; i++) {
let pic = picList[i];
this.setPic(sheet, pic, index);
index += 2;
}
return index;
},
setPic(sheet, pic, index) {
let row = index
sheet.addSpan(row+1, 1, 1, 4);
sheet.setRowHeight(row+1, 450);
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
sheet.getCell(row+1, 1).backgroundImage(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', this.getFileAccessHttpUrl(pic.path));
xhr.responseType = 'blob';
xhr.send();
sheet.addSpan(row+2, 1, 1, 4);
sheet.getCell(row+2, 1).value(pic.id).font("normal normal 12px simkai").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.top);
sheet.setRowHeight(row+2, 40);
},

复制代码

Clark.Pan · Clark.Pan

本帖最后由 Clark.Pan 于 2023-12-26 09:35 编辑

您可以设置picture中的startRow endRow startColumn endColumn属性，该属性用于使图片
按照单元格的位置进行设置。

顺便说一下看到您用的是picture.add的方法设置图片，这个是早起SpreadJS设置图片的方式，目前已有更新的设置方式，详情参考下面：

https://demo.grapecity.com.cn/sp ... icture-shape/purejs
新的接口支持的功能更多一些。

Joestar.Xu · Joestar.Xu

您好，单元格背景图是SpreadJS的特性，不支持导出为Excel。

如果想要添加图片的话可以参考这个学习指南中的内容实现：https://demo.grapecity.com.cn/sp ... ure-shape#timestamp

zjk · zjk

Joestar.Xu 发表于 2023-12-25 17:28
您好，单元格背景图是SpreadJS的特性，不支持导出为Excel。

如果想要添加图片的话可以参考这个学习指南 ...

我用了sheet.pictures.add的方法，但是他放置的位置是根据高度这些确定的，前面的行数，行高不固定，现在业主的需求是导出excel，图片放最后，一张图片一个单元格，有没有什么办法实现

zjk · zjk

Clark.Pan 发表于 2023-12-26 09:33
您可以设置picture中的startRow endRow startColumn endColumn属性，该属性用于使图片
按照单元格的位置进 ...

这个方法支持15.1.0版本么？用他报错：Cannot read properties of undefined (reading 'addPictureShape')。  代码：setPic(sheet, pic, index, high) {
            let row = index
            sheet.addSpan(row, 1, 1, 6);
            sheet.setRowHeight(row, 450);
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                  var reader = new FileReader();
                  reader.onloadend = function () {
                     console.log("high", high)
                     var picture = sheet.shapes.addPictureShape(pic.path, reader.result, 100, 100, 200, 200);
                     // sheet.pictures.add(pic.path, reader.result, 40, high, 450, 450);

                  }
                  reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', this.getFileAccessHttpUrl(pic.path));
            xhr.responseType = 'blob';
            xhr.send();
            sheet.addSpan(row + 1, 1, 1, 6);
            sheet.getCell(row + 1, 1).value(pic.path).font("normal normal 12px simkai").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.top);
            sheet.setRowHeight(row + 1, 40);
         },

Clark.Pan · Clark.Pan

这个是V15.2.0后新增的功能
https://demo.grapecity.com.cn/sp ... s/rnotes/rnotesv152
image.png308951720.png

Joestar.Xu · Joestar.Xu

您好，请问您的问题是否已经解决，如果仍未解决，欢迎继续回帖，我们来协助调研。

Ellia.Duan · Ellia.Duan

您好，由于您较长时间未回复，本贴先结帖了，有问题欢迎发新帖询问。

		自动登录	找回密码
密码			立即注册

[已处理] 图片列表放置到单元格，预览时可以显示图片，excel导出显示不了

最佳答案

7 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄