二维码截图问题

Wilson.Zhang · Wilson.Zhang

antd 发表于 2024-10-9 17:47
老师，在之前的帖子中，我阐述了为什么不能用spreadjs自己打印的原因(无法打印图片、无法无预览打 ...

看到了7楼和9楼热心用户的跟帖回复，可以参考他们给出的方案试试看能不能满足需求。

antd · antd

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

大佬，首先感谢大佬提供的思路，你提供的这种方式，确实可行，但是当页面内容多一点的时候camera.toImageSrc()获取的base64地址点开就是个空白的快照，定时器的值设置大点才能正常的获取，但这压根不能一劳永逸。

其实我这里更需要的是camera.toImageSrc()而非sheet.shapes.addPictureShape。camera.toImageSrc()能正确获取，那sheet.shapes.addPictureShape肯定就是正确的了

afr2022 · afr2022

Wilson.Zhang 发表于 2024-10-10 08:33
看到了7楼和9楼热心用户的跟帖回复，可以参考他们给出的方案试试看能不能满足需求。

老师，现在的问题是参考了各位大佬们的方案后，对于结构简单的模板可以正常的获取的到想要的src，但是结构稍复杂点的获取到的src就是空白图片

Wilson.Zhang · Wilson.Zhang

afr2022 发表于 2024-10-10 16:47
老师，现在的问题是参考了各位大佬们的方案后，对于结构简单的模板可以正常的获取的到想要的src，但是结 ...

“结构稍复杂点的获取到的src就是空白图片”，猜测可能是超时到时的时候二维码还没生成导致的，试试看把超时延长。

afr2022 · afr2022

Wilson.Zhang 发表于 2024-10-10 17:59
“结构稍复杂点的获取到的src就是空白图片”，猜测可能是超时到时的时候二维码还没生成导致的，试试看把 ...

我把时间调到5s才能正常的获取到src，如果是一个页面有多个二维码或者条形码。那循环获取怕是时间太长了吧？还是希望官方能够出一些事件或者方法直接获取快照后的二维码图片src

不吐葡萄皮 · 不吐葡萄皮

afr2022 发表于 2024-10-10 18:15
我把时间调到5s才能正常的获取到src，如果是一个页面有多个二维码或者条形码。那循环获取怕是时间太长了 ...

5s就有点过分了，可以把代码发出来看看吗？

antd · antd

不吐葡萄皮发表于 2024-10-10 18:34
5s就有点过分了，可以把代码发出来看看吗？

// 获取iframe
const iframe = document.querySelector("#printIframe");
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.head.innerHTML = `<style>${cssRules}</style>`
// 打印按钮
testBtn.onclick = async ()=>{
sheet = spread.getActiveSheet();
// 不显示水平网格线
sheet.options.gridline.showHorizontalGridline = false;
// 不显示垂直网格线
sheet.options.gridline.showVerticalGridline = false;
const sheetName = sheet.name();
iframeDoc.body.innerHTML = '';
// 清空
varRecords = [];
imageRecords = [];
cameraShapeList = [];
promiseScreenshotList = [];
// 获取打印区域
let printInfo = sheet.printInfo();
let rowStart = printInfo.rowStart();
let rowEnd = printInfo.rowEnd();
let columnStart = printInfo.columnStart();
let columnEnd = printInfo.columnEnd();
console.log(rowStart,rowEnd,columnStart,columnEnd);
if(rowStart>=0){//未设置打印区时，位置坐标都为-1
// 获取打印区域的上侧与左侧的距离
const printAreaTopLeft = getTopAndLeft(rowStart,columnStart,sheet);
// 获取打印区域的宽高
const printAreaWidthHeight = getWidthAndHeight(rowStart,columnStart,rowEnd,columnEnd,sheet);
let keyList = data[0]?Object.keys(data[0]):[];
// 寻找打印区域内且和源数据有映射的普通变量
printAreaVariable(keyList,rowStart,columnStart,rowEnd,columnEnd,sheetName);
// 调用判断打印区区域内的图片
printAreaImage(printAreaTopLeft,printAreaWidthHeight);
console.log("变量位置:",varRecords);
const divBox = document.createElement("div");//iframe下直接容器
async function test() {
for (let item of data){
let tempDiv = document.createElement("div");//每页的内容
tempDiv.classList.add("page-break");
// 给普通变量填值
varRecords.map(varItem=>{
sheet.setValue(varItem.row,varItem.col,item[varItem.keyName]);
});//遍历变量位置
const htmlStr = sheet.getRange(rowStart,columnStart,rowEnd - rowStart + 1,columnEnd - columnStart + 1).toHtml();
tempDiv.innerHTML = htmlStr;
tempDiv.style.position = "relative";
// 渲染插入的图片
imageRecords.map(imageItem=>{
const img = document.createElement("img");
img.style.position = "absolute";
img.style.top = imageItem.imageTop + 'px';
img.style.left = imageItem.imageLeft + 'px';
img.style.width = imageItem.width + 'px';
img.style.height = imageItem.height + "px";
img.src = imageItem.src;
tempDiv.appendChild(img);
});
// 获取快照后的图片src
for(let cameraInfo of cameraShapeList){
await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("我成功了");
console.log(cameraInfo.camera)
console.log(cameraInfo.camera.toImageSrc());
resolve()
},8000)
});
}
divBox.appendChild(tempDiv);
};//遍历源数据
}
await test();
console.log("执行完毕")
// cameraShapeList.forEach(item=>{
// sheet.shapes.remove(item.imgName)
// })
// 显示水平网格线
sheet.options.gridline.showHorizontalGridline = true;
// 显示垂直网格线
sheet.options.gridline.showVerticalGridline = true;
// // 还原普通变量
varRecords.forEach(item=>{
sheet.setValue(item.row,item.col,item.str);
});
// iframeDoc.body.appendChild(divBox);
// setTimeout(()=>{
// iframe.contentWindow.print();
// },100)
}else{
alert("请先设置打印区域");
return;
};
};//按钮
/**
* 使用spreadjs中单元格名称来充当变量，并获取区域内的变量
* @param {*} keyList 源数据中的属性变量
* @param {*} rowStart 区域开始的行
* @param {*} columnStart 区域开始的列
* @param {*} rowEnd 区域结束的行
* @param {*} columnEnd 区域结束的列
* @param {*} sheetName sheet名
*/
function printAreaVariable(keyList,rowStart,columnStart,rowEnd,columnEnd,sheetName){
sheet.getCustomNames().forEach(async cellInfo=>{
let {row,column,endRow,endColumn} = cellInfo.getExpression();
let cellName = cellInfo.getName();
console.log("单元格名称区域:",row,column,endRow,endColumn,cellName);
if(rowStart<=row && columnStart<=column){
if((rowEnd>=endRow && columnEnd>=endColumn) || (!endRow && !endColumn)){
console.log(row,column,cellName);
if(keyList.includes(cellName)){
varRecords.push({row,col:column,keyName:cellName,str:sheet.getValue(row,column)});
};//判断是否是源数据中的变量
// 二维码与条形码单元格名称
if(cellName.startsWith("QR_")){
let tempObj = {row, rowCount: endRow - row + 1, col:column, colCount: endColumn - column + 1};
// 范围区域转公式
const rangeStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(tempObj);
const imgName = `${cellName}_Image`;
let {top,left} = getTopAndLeft(row,column,sheet);
let obj = {top,left,row,column,endRow,endColumn,imgName};
// 快照
let camera = sheet.shapes.addCameraShape(imgName,`${sheetName}!${rangeStr}`,left,top);
obj.camera = camera;
cameraShapeList.push(obj);
};//判断二维码与条形码
}
};//判断是否在范围内
});
};
/**
* 判断那些插入的图片在打印区域内的方法
* @param {*} topLeftObj 打印区域的top与left值
* @param {*} widthHeightObj 打印区域的width和height值
*/
function printAreaImage(topLeftObj,widthHeightObj){
sheet.shapes.all().forEach(shape=>{
// console.log(shape,"src:",shape.toImageSrc(),"width:",shape.width(),"height:",shape.height(),"top:",shape.y(),"left:",shape.x());
//打印区域内的图片(不含截图)
if((shape.x()>=topLeftObj.left) &&
(shape.y()>=topLeftObj.top) &&
((shape.width()+shape.x())<=(topLeftObj.left+widthHeightObj.width)) &&
((shape.height()+shape.y())<=(topLeftObj.top+widthHeightObj.height)) &&
cameraShapeList.findIndex(item=>item.imgName == shape.name()) == -1){
// 图片距离打印区顶部的位置
let imageTop = shape.y() - topLeftObj.top;
let imageLeft = shape.x() - topLeftObj.left;
imageRecords.push({imageTop,imageLeft,src:shape.toImageSrc(),width:shape.width(),height:shape.height()});
};
});//遍历图片
console.log("插入的图片:",imageRecords);
};

复制代码

核心代码差不多就这些了。中间有两个方法是获取打印区域的宽高以及距离顶部和左侧的距离的。复杂点的模板就这样的：
图片.png184537047.png

这种就是获取到的src点开全是空白，刚才我又试了一下5s又不行了，还是空白。如果只是单纯的空白测试二维码，可以正常拿到设置1ms都可以
源数据格式：
图片.png742499694.png

不吐葡萄皮 · 不吐葡萄皮

function printAreaVariable(keyList,rowStart,columnStart,rowEnd,columnEnd,sheetName){
sheet.getCustomNames().forEach(async cellInfo=>{

复制代码

这个方法应该也是异步方法吧，然后调用的地方是await。

// 获取快照后的图片src
for(let cameraInfo of cameraShapeList){
await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("我成功了");
console.log(cameraInfo.camera)
console.log(cameraInfo.camera.toImageSrc());
resolve()
},8000)
});
}

复制代码

这个部分可以把for-of放到setTimeout里面吧，因为画好就是全部camera都画好。

我这边跑不起来，所以楼主可以发一下log信息，或者是完整可运行的例子更好

antd · antd

不吐葡萄皮发表于 2024-10-11 14:24
这个方法应该也是异步方法吧，然后调用的地方是await。

这个部分可以把for-of放到setTimeout里面吧 ...

感谢大佬的回复，printAreaVariable应该就是同步方法，里面并没有出现异步的操作，至于大佬说的把for-of放到定时器中，我再试一下看看，因为这个项目不是很方便完全发到论坛

所以只能放一点与这块相关的

antd · antd

不吐葡萄皮发表于 2024-10-11 14:24
这个方法应该也是异步方法吧，然后调用的地方是await。

这个部分可以把for-of放到setTimeout里面吧 ...

大佬，我整理个演示demo出来，大佬有时间的话可以帮忙指导一下，里面有演示视频。由于论坛的现在，成功的示例是gif的形式。其中二维码单元格的名字以QR_开头即可。

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

[调研中] 二维码截图问题

评分

评分

时代开发者征文活动