浮动图片，无论是url 还是 base64 的。导出都图片消失

收藏

let customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f0');
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(2);
customFloatingObject.endRow(2);
let img = document.createElement('img');
let base64 = 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAIAAABK/LdUAAAAAXNSR0IArs4c6Q
AAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAKWSURBVFhH7ZX7T5JRGMf9v1przZZdt66T1DDnWlNnk
YvyMkHUZvNCmoWJiOQQoeUFzVJwEVoaLi+zqExns5qXFBTLJATXkzyzt+flvGOzH/zh/ez7C+f5fs/Le97znBMjIiKy6/nlD
wy9cNdXdZRkG65frE6XlF5LrSqW62vLW/vso77lH+jbOcGNYJvpefIx1Yk9cpYksXmNmi7fCvOpP9f8MA/+EGBs6OOlMyVkdpY
S4xS2Dhcmt1hdWXN0D6tVpqRDiqoiM46ycPaMkBmj0UND77c5b3/vWGVhc0Jc/vZ4fGwuzhuR8deT21auTu/LVlyuLVc2Fcn1SY
eVpCosV99bnJ2P5EAecYNMuh7Pog8dW18FFvDs/hxiY6ks34hJgrneRqygNyNTWP6XhVnv+SPRvihmCAkH/657WNZmJ9YiAX+F+P
nKz7xv0dsxwGXCPUOsF44XYo1NbrqGpECn9t7ISbvX3T44P+tBHx+njW5L2NBYY/O0dYCklDLt4sIylgWAc4Qka8pasMYG+oykjNpur
LH4NDkL3SOTqkkyL6MGHWweaLpIqqG6E2uEqQ9fWoyOK9IKEuBq2bOKbgb8LQYdjDUu0LzEF1HCr1h3u5344SjAGqHgah2xslSh
bFr7vo4xDvCdiBNkNfdhmTDqmiBWAUFfP2p8Bof4zPS8e2z6ScvLzMRy4gHJktU4O59gMAS3CQmkniy+c9OSlVJJxqMRnMsCF9MfVFm6sFV
6tEBf3Tk8+D4UCsH4Zmgz+tUOK+Nc6dzXpfC0TCbffdaq22CV/OsBHOLQanTwFyCiDHcfBwIbGNsJ3iWfpcHO78uw0uJv6Sqt0FTo/o/AVe
Dqd8MdBDvFZn014BiHjYM1ERGR3U1MzG/dmjY5fcSQGwAAAABJRU5ErkJggg=='
// img.src = 'https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg'
img.src = base64
customFloatingObject.content(img);
spread.getActiveSheet().floatingObjects.add(customFloatingObject);

是代码写的有什么问题吗？再控件中正常显示。导出的文件中图片就消失了。

xcymoo · xcymoo

您好，请修改浮动元素的实例化方法，对于图片类的浮动元素，直接使用GC.Spread.Sheets.FloatingObjects.Picture类，详情请参考：https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.FloatingObjects.Picture

代码实现如下：

let base64 = 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAIAAABK/LdUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAKWSURBVFhH7ZX7T5JRGMf9v1przZZdt66T1DDnWlNnkYvyMkHUZvNCmoWJiOQQoeUFzVJwEVoaLi+zqExns5qXFBTLJATXkzyzt+flvGOzH/zh/ez7C+f5fs/Le97znBMjIiKy6/nlDwy9cNdXdZRkG65frE6XlF5LrSqW62vLW/vso77lH+jbOcGNYJvpefIx1Yk9cpYksXmNmi7fCvOpP9f8MA/+EGBs6OOlMyVkdpYS4xS2Dhcmt1hdWXN0D6tVpqRDiqoiM46ycPaMkBmj0UND77c5b3/vWGVhc0Jc/vZ4fGwuzhuR8deT21auTu/LVlyuLVc2Fcn1SYeVpCosV99bnJ2P5EAecYNMuh7Pog8dW18FFvDs/hxiY6ks34hJgrneRqygNyNTWP6XhVnv+SPRvihmCAkH/657WNZmJ9YiAX+F+PnKz7xv0dsxwGXCPUOsF44XYo1NbrqGpECn9t7ISbvX3T44P+tBHx+njW5L2NBYY/O0dYCklDLt4sIylgWAc4Qka8pasMYG+oykjNpurLH4NDkL3SOTqkkyL6MGHWweaLpIqqG6E2uEqQ9fWoyOK9IKEuBq2bOKbgb8LQYdjDUu0LzEF1HCr1h3u5344SjAGqHgah2xslShbFr7vo4xDvCdiBNkNfdhmTDqmiBWAUFfP2p8Bof4zPS8e2z6ScvLzMRy4gHJktU4O59gMAS3CQmkniy+c9OSlVJJxqMRnMsCF9MfVFm6sFV6tEBf3Tk8+D4UCsH4Zmgz+tUOK+Nc6dzXpfC0TCbffdaq22CV/OsBHOLQanTwFyCiDHcfBwIbGNsJ3iWfpcHO78uw0uJv6Sqt0FTo/o/AVeDqd8MdBDvFZn014BiHjYM1ERGR3U1MzG/dmjY5fcSQGwAAAABJRU5ErkJggg=='
let customFloatingObject = new GC.Spread.Sheets.FloatingObjects.Picture('f0', base64, 55, 55, 50, 100);
activeSheet.floatingObjects.add(customFloatingObject);

高阳0910 · 高阳0910

xcymoo 发表于 2022-10-12 15:53
您好，请修改浮动元素的实例化方法，对于图片类的浮动元素，直接使用GC.Spread.Sheets.FloatingObjects.P ...

我是想把图片放到单元格中。例如放到 H20 这个单元格，您这方式怎么确定 x,y.width,height

xcymoo · xcymoo

高阳0910 发表于 2022-10-12 16:18
我是想把图片放到单元格中。例如放到 H20 这个单元格，您这方式怎么确定 x,y.width,height

如果想在单元格直接放置一个图片，可以使用backgroundImage方法：

activeSheet.getCell(1,1).backgroundImage(base64);

高阳0910 · 高阳0910

xcymoo 发表于 2022-10-12 16:28
如果想在单元格直接放置一个图片，可以使用backgroundImage方法：

activeSheet.getCell(1,1).backgrou ...

加背景图片在功能需求上差点意思。而且导出也不显示。

xcymoo · xcymoo

高阳0910 发表于 2022-10-12 17:03
加背景图片在功能需求上差点意思。而且导出也不显示。

明白您的意思了。我们spread.js的api支持直接向excel的单元格放置图片，但是excel本身可能没有这个功能，所以只能用浮动对象来实现。

实现方式如下，本人已测试，可以在对应单元格放置一个浮动图，并在导出的文件中有图片
1665566021605.png516994323.png

let rect = activeSheet.getCellRect(1, 1)
let cornerRect = activeSheet.getCellRect(0, 0, -1, -1)
let realRect = {
x: rect.x - cornerRect.width,
y: rect.y - cornerRect.height
}
let customFloatingObject = new GC.Spread.Sheets.FloatingObjects.Picture('f0', base64, realRect.x, realRect.y, rect.width, rect.height);
activeSheet.floatingObjects.add(customFloatingObject);

xcymoo · xcymoo

xcymoo 发表于 2022-10-12 17:14
明白您的意思了。我们spread.js的api支持直接向excel的单元格放置图片，但是excel本身可能没有这个功能， ...

导出的excel文件：

1665566137160.png208555907.png

高阳0910 · 高阳0910

xcymoo 发表于 2022-10-12 17:16
导出的excel文件：

您这个方法可行

。
但是如果图片是个url地址呢 ,必须转成 base64吗？有内置的方法进行转换吗？

Clark.Pan · Clark.Pan

这个问题，你可以试试直接同picure方法去添加图片而不是FloatingObjects，FloatingObjects功能很广泛，Excel没有对应的功能，所以用FloatingObjects不能直接导出Excel
https://demo.grapecity.com.cn/sp ... ating-object/purejs
image.png519018554.png

如果想要固定图片的范围，添加之后再去调用startRow, startColumn,endRow,endColumn去调整即可。picture对象中也有对应的方法。
https://demo.grapecity.com.cn/sp ... ects.Picture#endRow

高阳0910 · 高阳0910

Clark.Pan 发表于 2022-10-12 17:37
这个问题，你可以试试直接同picure方法去添加图片而不是FloatingObjects，FloatingObjects功能很广泛，Exce ...

新的API 文档看的我一愣一愣的。

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

[已处理] 浮动图片，无论是url 还是 base64 的。导出都图片消失

12 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄