SpreadJS选择区域导出图片

收藏

本帖最后由 Lynn.Dou 于 2024-4-2 11:39 编辑

背景：
用户希望实现这样一个功能：选择单元格区域后，可以点击按钮将这片区域作为图片导出。

思路：
如果将该业务放在后端处理，借助GcExcel可以很容易实现。GcExcel提供了toImage方法，支持将工作表、单元格区域等直接导出为图片。
如果是对于SpreadJS，应该如何实现呢？
SpreadJS在打印的时候其实默认会生成图片，可以借助打印功能实现此需求。
需注意，因需要借助printInfo的打印区域功能，去控制想要导出图片的单元格区域，所以在设置完成后会影响原sheet打印设置。
为避免影响后续的打印/导出pdf行为，需在导出图片后恢复原sheet的打印设置。

主要代码如下：

//将事件绑定到工作薄在打印之前
spread.bind(GC.Spread.Sheets.Events.BeforePrint, (s, e) => {
let iframe = e.iframe
let imgs = iframe.contentWindow.document.getElementsByTagName("img")
for (let i = 0; i < imgs.length; i++) {
let img = imgs[i]
let canvas = document.createElement("canvas")
canvas.height = img.naturalHeight
canvas.width = img.naturalWidth
let ctx = canvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0)
canvas.toBlob((blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "test" + i + ".png";
link.click();
link.remove();
})
e.cancel = true
}
})
document.getElementById('exportImgs').onclick = () => {
sheet = spread.getActiveSheet();
// 获取sheet原打印设置，便于后面恢复
var oldPrintInfo = sheet.printInfo();
var oldPrintArea = sheet.getCustomName("Print_Area") && GC.Spread.Sheets.CalcEngine.expressionToFormula(sheet, sheet.getCustomName("Print_Area").getExpression());
console.log("原打印设置", oldPrintInfo);
setPrintInfo(sheet);
spread.print();
// 恢复原sheet的打印设置，以避免影响打印/导出pdf行为
sheet.printInfo(oldPrintInfo);
sheet.removeCustomName("Print_Area");
if (oldPrintArea) {
sheet.addCustomName("Print_Area", oldPrintArea)
}
console.log("恢复后的打印设置:", sheet.printInfo());
designer.refresh();
}
function setPrintInfo(sheet) {
let sel = sheet.getSelections()[0];
// 借助printInfo的打印区域功能，去控制想要导出图片的单元格区域。
let printInfo = new GC.Spread.Sheets.Print.PrintInfo();
//打印质量大于4时才会生成图片
printInfo.qualityFactor(9);
// 隐藏行列头
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a3))
printInfo.margin({
top: 0,
bottom: 0,
left: 0,
right: 0,
header: 0,
footer: 0
});
// 打印选中区域
printInfo.rowStart(sel.row);
printInfo.rowEnd(sel.row + sel.rowCount - 1);
printInfo.columnStart(sel.col);
printInfo.columnEnd(sel.col + sel.colCount - 1);
sheet.printInfo(printInfo);
console.log("导出图片的打印设置：", printInfo);
}

复制代码

来看下效果：

完整代码请参考附件demo。

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

SpreadJS选择区域导出图片

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人