SpreadJS选择区域导出图片

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

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

主要代码如下：

1. //将事件绑定到工作薄 在打印之前
   
2.             spread.bind(GC.Spread.Sheets.Events.BeforePrint, (s, e) => {
   
3.                 let iframe = e.iframe
   
4.                 let imgs = iframe.contentWindow.document.getElementsByTagName("img")
   
5.                 for (let i = 0; i < imgs.length; i++) {
   
6.                     let img = imgs[i]
   
7.                     let canvas = document.createElement("canvas")
   
8.                     canvas.height = img.naturalHeight
   
9.                     canvas.width = img.naturalWidth
   
10.                     let ctx = canvas.getContext('2d')
    
11.                     ctx.fillStyle = '#fff'
    
12.                     ctx.fillRect(0, 0, canvas.width, canvas.height)
    
13.                     ctx.drawImage(img, 0, 0)
    
14.                     canvas.toBlob((blob) => {
    
15.                         const link = document.createElement("a");
    
16.                         link.href = URL.createObjectURL(blob);
    
17.                         link.download = "test" + i + ".png";
    
18.                         link.click();
    
19.                         link.remove();
    
20.                     })
    
21.                     e.cancel = true
    
22.                 }
    
23.             })
    
24. 
    
25.             document.getElementById('exportImgs').onclick = () => {
    
26.                 sheet = spread.getActiveSheet();
    
27.                 // 获取sheet原打印设置，便于后面恢复
    
28.                 var oldPrintInfo = sheet.printInfo();
    
29.                 var oldPrintArea = sheet.getCustomName("Print_Area") && GC.Spread.Sheets.CalcEngine.expressionToFormula(sheet, sheet.getCustomName("Print_Area").getExpression());
    
30.                 console.log("原打印设置", oldPrintInfo);
    
31.                
    
32.                 setPrintInfo(sheet);
    
33.                 spread.print();
    
34.                
    
35.                 // 恢复原sheet的打印设置，以避免影响打印/导出pdf行为
    
36.                 sheet.printInfo(oldPrintInfo);
    
37.                 sheet.removeCustomName("Print_Area");
    
38.                 if (oldPrintArea) {
    
39.                     sheet.addCustomName("Print_Area", oldPrintArea)
    
40.                 }
    
41.                 console.log("恢复后的打印设置:", sheet.printInfo());
    
42.                 designer.refresh();
    
43.             }
    
44.    
    
45.             function setPrintInfo(sheet) {
    
46.                 let sel = sheet.getSelections()[0];
    
47.                 // 借助printInfo的打印区域功能，去控制想要导出图片的单元格区域。
    
48.                 let printInfo = new GC.Spread.Sheets.Print.PrintInfo();
    
49.                 //打印质量大于4时才会生成图片
    
50.                 printInfo.qualityFactor(9);
    
51.                 // 隐藏行列头
    
52.                 printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
    
53.                 printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
    
54.                 printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a3))
    
55.                 printInfo.margin({
    
56.                     top: 0,
    
57.                     bottom: 0,
    
58.                     left: 0,
    
59.                     right: 0,
    
60.                     header: 0,
    
61.                     footer: 0
    
62.                 });
    
63.                 // 打印选中区域
    
64.                 printInfo.rowStart(sel.row);
    
65.                 printInfo.rowEnd(sel.row + sel.rowCount - 1);
    
66.                 printInfo.columnStart(sel.col);
    
67.                 printInfo.columnEnd(sel.col + sel.colCount - 1);
    
68.                 sheet.printInfo(printInfo);
    
69.                 console.log("导出图片的打印设置：", printInfo);
    
70.             }

复制代码

来看下效果：


完整代码请参考附件demo。