SpreadJS大数据量复制粘贴思路方案

背景：
SpreadJS提供了复制粘贴能力，可以满足用户基础的业务需求。但有用户反馈，对于几十万行甚至百万行的数据，如果直接选择整列进行复制粘贴，会出现卡顿问题，影响使用体验。
针对此类问题，建议大家先尝试升级至新版本进行测试，看是否可以满足当前业务需求。因为SpreadJS在版本迭代的过程中，性能也是在不断优化的。
但是如果数据量特别大，其实从前端入手也没有很好的优化空间了，因为复制的内容需要缓存，复制的内容越大，需要缓存的空间就越多，并且SpreadJS的复制粘贴不仅仅只是单纯的复制数据，还支持样式，格式等其他内容。粘贴的时候也需要针对每一个属性去按个分析，如果复制内容多的话，这里会损失比较多的性能。
所以，可以换个思路，借助后端GcExcel来解决。

思路：
针对单元格区域的复制粘贴行为，可以使用SpreadJS原生的复制粘贴菜单。
对于整列的数据，可以新增一个菜单项，将当前选中的列信息传递给后端GcExcel去同步处理复制粘贴逻辑，并将处理后的结果返回给SpreadJS进行显示，以此解决此类问题。

实现方式：
SpreadJS新增菜单项实现思路（以复制项为例，粘贴项同理）:

1. // config中新增菜单项
   
2.         var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
3.         config.commandMap = {
   
4.             myCopyCmd: {
   
5.                 text: "列复制",
   
6.                 commandName: "myCopyCmd",
   
7.                 iconClass: "gc-spread-copy",
   
8.                 visibleContext: "ClickColHeader",
   
9.                 execute: async (context, propertyName, fontItalicChecked) => {
   
10.                     var spread = context.getWorkbook();
    
11.                     spread.commandManager().execute({ cmd: "contextMenuCopyCol" })
    
12.                 }
    
13.             },
    
14.             myPasteCmd: {
    
15.                 text: "列粘贴",
    
16.                 commandName: "myPasteCmd",
    
17.                 iconClass: "gc-spread-paste",
    
18.                 visibleContext: "ClickColHeader",
    
19.                 execute: async (context, propertyName, fontItalicChecked) => {
    
20.                     var spread = context.getWorkbook();
    
21.                     spread.commandManager().execute({ cmd: "contextMenuPasteCol" })
    
22.                 }
    
23.             },
    
24.         }
    
25.         config.contextMenu.splice(0, 0, "myCopyCmd");
    
26.         config.contextMenu.splice(0, 0, "myPasteCmd");
    
27.         // 工作簿，初始化且显示
    
28.         var designer = new GC.Spread.Sheets.Designer.Designer("ss", config);
    
29.         var spread = designer.getWorkbook();
    
30. 
    
31.         // 注册自定义命令 - 列复制
    
32.         spread.commandManager().register("contextMenuCopyCol",
    
33.             {
    
34.                 canUndo: true,
    
35.                 execute: function (context, options, isUndo) {
    
36.                     var Commands = GC.Spread.Sheets.Commands;
    
37.                     // 在此加cmd
    
38.                     options.cmd = "contextMenuCopyCol";
    
39.                     if (isUndo) {
    
40.                         Commands.undoTransaction(context, options);
    
41.                         return true;
    
42.                     } else {
    
43.                         var sheet = spread.getActiveSheet();
    
44.                         // 注意：需要在options中定义sheetName，否则撤销行为可能无效。
    
45.                         options.sheetName = sheet.name();
    
46.                         Commands.startTransaction(context, options);
    
47.                         // 判断如果是选择的整列，则调用后端接口，将sel相关信息传递给后端GcExcel
    
48.                         var sels = sheet.getSelections();
    
49.                         console.log(sels);
    
50.                         if (sels && sels.length > 0) {
    
51.                             for (var i = 0; i < sels.length; i++) {
    
52.                                 var sel = sels[i];
    
53.                                 var row = sel.row;
    
54.                                 var col = sel.col;
    
55.                                 if (row == -1) {
    
56.                                     console.log();
    
57.                                     alert("整列复制");
    
58.                                     // 根据实际业务需求，调用后端接口，将sel相关信息传递给后端GcExcel
    
59.                                     var xhr = new XMLHttpRequest();
    
60.                                     xhr.open("POST", "/sjs/copy", true);
    
61. 
    
62.                                    var formData = new FormData();
    
63.                                    formData.append('col', col);
    
64. 
    
65.                                    xhr.onreadystatechange = function () {
    
66.                                        if (xhr.readyState === XMLHttpRequest.DONE) {
    
67.                                            if (xhr.status === 200) {
    
68.                                                console.log(xhr.responseText);
    
69.                                                var result = JSON.parse(xhr.responseText);
    
70.                                                var code = result.code;
    
71. 
    
72.                                                if (code === 200) {
    
73.                                                    console.log("复制列成功")
    
74.                                                }
    
75.                                            } else {
    
76.                                                console.log(xhr.status);
    
77.                                                console.log(xhr.responseText);
    
78.                                            }
    
79.                                        }
    
80.                                    };
    
81.                                    xhr.send(formData);
    
82. 
    
83.                                 }
    
84.                             }
    
85.                         }
    
86.                         Commands.endTransaction(context, options);
    
87.                         return true;
    
88.                     }
    
89.                 }
    
90.             });
    
91. 
    
92.         // 注册自定义命令 - 列粘贴
    
93.         spread.commandManager().register("contextMenuPasteCol",
    
94.         {
    
95.             canUndo: true,
    
96.             execute: function (context, options, isUndo) {
    
97.                 var Commands = GC.Spread.Sheets.Commands;
    
98.                 // 在此加cmd
    
99.                 options.cmd = "contextMenuPasteCol";
    
100.                 if (isUndo) {
     
101.                     Commands.undoTransaction(context, options);
     
102.                     return true;
     
103.                 } else {
     
104.                     var sheet = spread.getActiveSheet();
     
105.                     // 注意：需要在options中定义sheetName，否则撤销行为可能无效。
     
106.                     options.sheetName = sheet.name();
     
107.                     Commands.startTransaction(context, options);
     
108.                     // 判断如果是选择的整列，则调用后端接口，将sel相关信息传递给后端GcExcel
     
109.                     var sels = sheet.getSelections();
     
110.                     console.log(sels);
     
111.                     if (sels && sels.length > 0) {
     
112.                         for (var i = 0; i < sels.length; i++) {
     
113.                             var sel = sels[i];
     
114.                             var row = sel.row;
     
115.                             var col = sel.col;
     
116.                             if (row == -1) {
     
117.                                 console.log();
     
118.                                 alert("整列粘贴");
     
119.                                 // 根据实际业务需求，调用后端接口，将sel相关信息传递给后端GcExcel
     
120.                                 spread.save(function (blob) {
     
121.                                    var xhr = new XMLHttpRequest();
     
122.                                    xhr.open("POST", "/sjs/paste", true);
     
123.                                    // 设置响应类型为blob
     
124.                                    xhr.responseType = 'blob';
     
125.                                    xhr.onload = function(e) {
     
126.                                      if (this.status == 200) {
     
127.                                        // 处理文件流
     
128.                                        var file = new File([this.response],'test.sjs')
     
129.                                        spread.open(file);
     
130.                                        console.log("加载结束")
     
131.                                      }
     
132.                                    };
     
133. 
     
134.                                    var formData = new FormData();
     
135.                                    formData.append('sjs', blob);
     
136.                                    formData.append('col', col);
     
137.                                    xhr.send(formData);
     
138.                                 }, function (e) {
     
139.                                    console.log(e);
     
140.                                 });
     
141.                             }
     
142.                         }
     
143.                     }
     
144.                     Commands.endTransaction(context, options);
     
145.                     return true;
     
146.                 }
     
147.             }
     
148.         });

复制代码

来看下后端GcExcel的处理逻辑：
对于复制列行为，GcExcel主要是获取并存储复制的列索引信息。

1. @PostMapping("/copy")
   
2.     public R copyColumn(@RequestParam("col") int copyCol) throws IOException {
   
3.         System.out.println("success");
   
4.         col = copyCol;
   
5.         // 调用后端接口，复制col所在列，进行粘贴
   
6.         System.out.println("复制成功");
   
7.         // 一切正常
   
8.         return R.success(CodeEnum.SUCCESS, Constants.OK);
   
9.     }

复制代码

在粘贴时，则将SpreadJS导出的sjs文件流进行加载，并通过copy方法进行复制粘贴，最后再将修改后的sjs文件流返回给前端SpreadJS加载。

1. @PostMapping("/paste")
   
2.     public void pasteColumn(HttpServletResponse response, @RequestParam("sjs") MultipartFile sjsFile, @RequestParam("col") int pasetCol) throws IOException {
   
3.         System.out.println("success");
   
4. 
   
5.         // 设置响应内容类型为二进制流
   
6.         response.setContentType("application/octet-stream");
   
7.         response.setHeader("Content-Disposition", "attachment; filename=test.sjs");
   
8. 
   
9.         // 创建一个新的文件流来保存文件。
   
10.         InputStream inputStream = null;
    
11.         try {
    
12.             inputStream = sjsFile.getInputStream();
    
13.         } catch (FileNotFoundException e) {
    
14.             // 处理文件未找到异常。
    
15.             e.printStackTrace();
    
16.         } catch (IOException e) {
    
17.             throw new RuntimeException(e);
    
18.         }
    
19.         // 加载sjs文件。
    
20.         workbook.open(inputStream, OpenFileFormat.Sjs);
    
21.         // 调用后端接口，复制col所在列，粘贴至pasetCol
    
22.         IWorksheet worksheet = workbook.getWorksheets().get("Sheet1");
    
23.         worksheet.getRange("A1").setValue("test");
    
24.         worksheet.getRange(-1, col, -1, 1).copy(worksheet.getRange(-1, pasetCol, -1, 1));
    
25.         System.out.println("粘贴成功");
    
26.         // 返回sjs文件
    
27.         OutputStream outputStream = response.getOutputStream();
    
28.         workbook.save(outputStream, SaveFileFormat.Sjs);
    
29.         //workbook.save("data/test1.sjs");
    
30.         outputStream.close();
    
31.     }

复制代码

来简单测试下效果（注：正式授权下不会多出试用提醒sheet）：


完整代码请参考附件demo。