利用blob数据流临时保存工作簿

收藏

本帖最后由 Richard.Huang 于 2023-9-7 14:12 编辑

背景：
大家在在线表格编辑器编辑自己的工作内容，工作进行到一半，又有新的工作簿需要去操作，此时应该怎么办呢？一般会再开一个在线表格编辑器的窗口，然后编辑新的内容，但是窗口过多会出现浏览器标签页爆满的情况，title会被挤压到看不清，寻找自己想要操作的工作簿就很费时间了，如果我们将多个工作簿展示在一个页面并且还能够根据自己需要加载自己需要的工作簿该多好？

思路：
实际上我们可以通过spread的save方法来操作，咱们的save方法是将工作簿内容转换为一个blob数据流，然后利用第三方方法saveAs将数据流制作成文件并落盘，如果我们不落盘，而是将数据流保存为一个变量，然后在需要的时候将该数据流再恢复不就可以实现我们的想法了吗？原理说得通，咱们可以进行相应的实现

解决方案：
1. 保存当前工作簿

spread.save(
function (blob) {
snaparr["shot" + popIndex] = blob;
},
function (e) {
console.log(e);
}
);

复制代码

2. 恢复工作簿

spread.open(
snaparr["shot" + popIndex],
function () {
},
function (e) {
console.log(e);
}
);

复制代码

3. 配合html2canvas的方法将屏幕截图和保存的数据联系在一起

html2canvas(snapArea).then(function (canvas) {
// 将Canvas转换为Blob
canvas.toBlob(function (blob) {
// 使用compressorjs库压缩图像
new Compressor(blob, {
quality: 0.6, // 压缩质量，0.6表示60%
success(result) {
const screenshotDataURL = URL.createObjectURL(result);
var popIndex = domIndex;
// 快照图
const screenshotImage = document.getElementById("shot" + popIndex);
screenshotImage.src = screenshotDataURL;
screenshotImage.style.display = "block";
// 如果鼠标放上去了，就得显示放大镜效果
screenshotImage.addEventListener("mouseover", function () {
showPopup(screenshotDataURL, popIndex);
});
screenshotImage.addEventListener("mouseout", function () {
hidePopup();
});
// 设置图像元素的宽度和高度
screenshotImage.style.width = "200px";
screenshotImage.style.height = "150px";
spread.save(
function (blob) {
snaparr["shot" + popIndex] = blob;
},
function (e) {
console.log(e);
}
);
domIndex++;
},
error(e) {
console.log("Error compressing image:", e.message);
},
});
}, "image/png");
});

复制代码

4. 完整效果展示

详细代码可以参考附件Demo：

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

利用blob数据流临时保存工作簿

0 个回复

SpreadJS 认证

SpreadJS 高级认证