二维码截图问题

收藏

本帖最后由 Wilson.Zhang 于 2024-10-22 08:45 编辑

产品：SpreadJS
版本：17.1.7
调研编号：SJS-26873
Last Review：2024-10-22
当前进展：计划在17.1.8版本修复。

大佬们，请教一个问题，现在spreadjs中有一个二维码，=BC_QRCODE(E11)，E11最开始的值为a，此时点击按钮对二维码进行截图，接着再修改E11的值为b，再截图一张。
这时页面就有两张二维码截图，我们的需求是这两张二维码的值分别为a和b，但是实际上扫出来的值都是b，接着我们修改E11的值为c，再次扫描两张二维码，两张二维码的值都变成了c？
这个问题有解决方案吗？

图片.png286413268.png

Wilson.Zhang · Wilson.Zhang

本帖最后由 Wilson.Zhang 于 2024-10-9 11:22 编辑

您好！区域快照同步着引用区域的数据，引用区域数据变化也将同步至区域快照。因此，只要BC_QRCODE公式的参数有变，其生成的二维码也变化，引用了二维码的区域快照也同步变化。这个功能与MS Excel保持一致，针对您的使用场景，可以在每次生成二维码并且得到对应的区域快照后，将区域快照保存为图片，如下图所示。

1728444113800.png383425292.png

然后，在需要时将保存的图片再插入至Worksheet。

antd · antd

Wilson.Zhang 发表于 2024-10-9 11:20
您好！区域快照同步着引用区域的数据，引用区域数据变化也将同步至区域快照。因此，只要BC_QRCODE公式的参 ...

老师，我现在的需求是点击按钮时，我希望拿到首次快照的图片src，并且不希望这个src发生改变。因为我拿到这个src后会去创建img标签，并为其设置src值，然后再把img标签append到我的iframe容器中，进行打印。现在的问题就是打印出来的二维码全是一个值。
老师提供这种方式是不适用的，多了用户操作的步骤：用户不仅要设置好二维码公式，还得把快照后的二维码图片保存到本地，再插入到spreadjs中，还要调整图片的位置。这肯定是不符合我们的需求的。请问老师有什么方法可以让第一次快照的图片src不受后续公式引用值的变化而变化。

不吐葡萄皮 · 不吐葡萄皮

既然不希望快照更新，那就有了快照就把快照变成图片呗

setInterval(()=>{
sheet.shapes.all().forEach((shape)=>{
if (shape instanceof GC.Spread.Sheets.Shapes.CameraShape) {
var src = shape.toImageSrc();
var name = shape.name();
sheet.shapes.remove(name)
sheet.shapes.addPictureShape(name, src, shape.x(), shape.y(), shape.width(), shape.height());
}
})
},1000)

复制代码

Wilson.Zhang · Wilson.Zhang

本帖最后由 Wilson.Zhang 于 2024-10-9 14:31 编辑

antd 发表于 2024-10-9 12:13
老师，我现在的需求是点击按钮时，我希望拿到首次快照的图片src，并且不希望这个src发生改变。因 ...

根据您的描述，主要需要的是二维码快照图片的src，这个src是base64码。您现在的需求场景是：对同一个单元格中的BC_QRCODE公式引用同一个单元格E11在不同时期的数据生成的二维码截取了快照，而且希望已经生成的快照不随E11单元格值的变化而同步变化。但是，快照内容与引用区域的数据强相关，并且会同步引用区域的数据变化。

针对这样的设计和您的需求，我们能想到的办法就是：将二维码快照转换为图片，这样就切断了图片和引用区域之间的联系。而且，我理解应该不用用户如何设置，您可以在您提到的按钮的响应函数中定义这一切操作逻辑，即点击按钮后触发上述逻辑。另外，或许可以不使用区域快照，尝试转为对按钮定义能够将二维码转为静态图片的业务逻辑。

这个问题总归是区域快照和引用区域之间始终关联，使得区域快照会同步引用区域的数据变化。所以，可以尝试的解决方向就是让图片不同步原引用区域的数据变化，与楼上热心用户所说的如出一辙。关于上述方案，您可以评估下。

antd · antd

Wilson.Zhang 发表于 2024-10-9 14:30
根据您的描述，主要需要的是二维码快照图片的src，这个src是base64码。您现在的需求场景是：对同一个单元 ...

老师，在之前的帖子中，我阐述了为什么不能用spreadjs自己打印的原因(无法打印图片、无法无预览打印等)。这里获取二维码的src的目的是在创建img标签的时候给标签赋src的值，最后再组装到html中进行打印。
这里为了方便老师理解我此处遇到的问题，我简单的举个例子：大致步骤如下图描述
图片.png105018004.png

const data = [110,120,119];
data.forEach(item=>{
sheet.setValue(0,0,item.name);
//获取每次的二维码base64的值
})

复制代码

但就算用了老师之前帖子中回复的用定时器去获取base64的值，但由于这里是要循环去获取三次，最后定时器获取到的值全是最后一次的值，即119。至于热心网友的方案，也是一样的情况

香香 · 香香

antd 发表于 2024-10-9 12:13
老师，我现在的需求是点击按钮时，我希望拿到首次快照的图片src，并且不希望这个src发生改变。因 ...

区域快照同步着引用区域的数据，只有picture能满足要求，有个想法，就是将区域快照转化成picture，然后删掉区域快照，这些逻辑可以写在button的click事件里。我简单写了一下。希望能够帮到您。

window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.querySelector("#ss"));
const sheet = spread.getActiveSheet();
sheet.setColumnWidth(2, 200);
sheet.setRowHeight(2, 200);
sheet.setFormula(2, 2, "=BC_QRCODE(E11)");
sheet.setValue(10, 4, "a");
document.getElementById("add").onclick = function () {
var left = sheet.getCellRect(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()).x;
var top = sheet.getCellRect(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()).y;
var shape = sheet.shapes.addCameraShape("", "Sheet1!C3", 240, 200);
shape.isVisible(false);
setTimeout(() => {
var shapeImageSrc = shape.toImageSrc();
var pic = sheet.shapes.addPictureShape("", shapeImageSrc, left, top, 100, 100);
sheet.shapes.remove(shape.name());
}, 1);
}
};

复制代码

antd · antd

香香发表于 2024-10-9 18:02
区域快照同步着引用区域的数据，只有picture能满足要求，有个想法，就是将区域快照转化成picture，然后删 ...

大佬，你这种方式我试过，如果只是获取一次，确实可行，但是我现在的情况是需要循环的去获取二维码图片，每次循环的时候二维码的值是不一样的，但是位置是一样的。大佬有空的话可以看看我最新回复-6楼。循环获取的话，可能因为是定时器是一个宏任务的原因，导致最终获取的二维码src全是最后一次循环数据的值

不吐葡萄皮 · 不吐葡萄皮

本帖最后由不吐葡萄皮于 2024-10-9 18:30 编辑

知道了你的要求，那就是等一会儿就能拿到绘制出来的图片了，比如下面代码：

var camera = sheet.shapes.addCameraShape("CameraShape1", "Sheet1!D5", 30, 45, 340, 330);
sheet.setFormula(4,3,"=BC_QRCODE(A1)")
async function example() {
const data = [110,120,119];
for (var index = 0; index<data.length; index++) {
var item = data[index];
await new Promise(resolve => {
sheet.setValue(0,0,item);
setTimeout(()=>{
var src = camera.toImageSrc();
sheet.shapes.addPictureShape(""+item, src, camera.x()+index*80, camera.y(), camera.width(), camera.height());
resolve();
}, 500);
});
}
}
example();

复制代码

antd · antd

不吐葡萄皮发表于 2024-10-9 18:21
知道了你的要求，那就是等一会儿就能拿到绘制出来的图片了，比如下面代码：

好的，谢谢大佬，我研究研究

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

[已处理] 二维码截图问题

45 个回复

评分

评分

时代开发者征文活动