用SpreadJS和GCExcel实现模板语法的实时预览

我们在用GCExcel的模板语法时，每次在Excel中写完模板，去执行完扩展模板以后，需要再次打开扩展后的表格，非常不方便，因此结合SpreadJS，用SpreadJS进行模板编辑，以及扩展后的结果查看会事半功倍
1.加载模板，将模板展示到SpreadJS中

1. var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
   
2.                                 sheetCount: 1
   
3.                         });
   
4.                         // 加载一级行模板
   
5.                         $("#loadA").click(function () {
   
6.                                 var excelIo = new GC.Spread.Excel.IO();
   
7.                                 // Download Excel file
   
8.                                 var excelFilePath = 'span/一级行汇总.xlsx';
   
9.                                 var xhr = new XMLHttpRequest();
   
10.                                 xhr.open('GET', excelFilePath, true);
    
11.                                 xhr.responseType = 'blob';
    
12.                                 xhr.onload = function (e) {
    
13.                                         if (this.status == 200) {
    
14.                                                 // get binary data as a response
    
15.                                                 var blob = this.response;
    
16.                                                 // convert Excel to JSON
    
17.                                                 excelIo.open(blob, function (json) {
    
18.                                                         var workbookObj = json;
    
19.                                                         spread.fromJSON(workbookObj);
    
20.                                                 }, function (e) {
    
21.                                                         // process error
    
22.                                                         alert(e.errorMessage);
    
23.                                                 }, {});
    
24.                                         }
    
25.                                 };
    
26.                                 xhr.send();
    
27.                         })

复制代码

  页面如下：


2.保存模板（将修改后的模板传给后端保存到模板路径）  前端代码：

1. $("#saveA").click(function () {
   
2.                                 var json = spread.toJSON();
   
3.                                 var excelIo = new GC.Spread.Excel.IO();
   
4.                                 // here is excel IO API   
   
5.                                 excelIo.save(json, function (blob) {
   
6.                                         var fd = new FormData();
   
7.                                         fd.append("file", blob);
   
8.                                         $.ajax({
   
9.                                                 url: "exportExcelA",
   
10.                                                 type: "POST",
    
11.                                                 contentType: false,
    
12.                                                 processData: false,
    
13.                                                 data: fd,
    
14.                                                 success: function (data) {
    
15.                                                         if (data.isSuccess == 1) {
    
16.                                                                 alert("上传成功！");
    
17.                                                         } else {
    
18.                                                                 alert(data.errorMessage);
    
19.                                                         }
    
20.                                                 },
    
21.                                                 error: function (ex) {
    
22.                                                         alert("上传失败：" + ex);
    
23.                                                 }
    
24.                                         });
    
25.                                 }, function (e) {
    
26.                                         alert(e);
    
27.                                 });
    
28.                         })

复制代码

后端代码：

1. // 保存一级行模板
   
2.         @RequestMapping(value = "/exportExcelA", method = RequestMethod.POST)
   
3.         @ResponseBody
   
4.         public Map<String, Object> exportExcelA(HttpServletRequest request, @RequestParam("file") MultipartFile file)
   
5.                         throws IOException, ServletException {
   
6.                 String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + File.separator + "static"
   
7.                                 + File.separator + "span";
   
8.                 System.out.println(path);
   
9.                 File floaderpath = new File(path);
   
10.                 if (!floaderpath.exists()) {
    
11.                         floaderpath.mkdir();
    
12.                 }
    
13.                 // File newfile = new File(path + File.separator + new Date().getTime() +
    
14.                 // ".xlsx");
    
15.                 File newfile = new File(path + File.separator + "一级行汇总.xlsx");
    
16. 
    
17.                 int result = 0;
    
18.                 Map<String, Object> resultMap = new HashMap<String, Object>();
    
19.                 try {
    
20.                         file.transferTo(newfile);
    
21.                         resultMap.put("isSuccess", 1);
    
22.                 } catch (Exception e) {
    
23.                         resultMap.put("isSuccess", result);
    
24.                         resultMap.put("errorMessage", e.getMessage());
    
25.                         e.printStackTrace();
    
26.                 }
    
27.                 return resultMap;
    
28.         }

复制代码

3.模板扩展：

1. // 将二级行数据汇总到一级行
   
2.         @RequestMapping(value = "/spanExcelA", method = RequestMethod.GET)
   
3.         @ResponseBody
   
4.         public Map<String, Object> spanExcelA(HttpServletRequest request) throws IOException, ServletException {
   
5.                 int result = 0;
   
6.                 Map<String, Object> resultMap = new HashMap<String, Object>();
   
7.                 String spanPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + File.separator + "static"
   
8.                                 + File.separator + "result";
   
9.                 String savePath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + File.separator + "static"
   
10.                                 + File.separator + "span";
    
11.                 File savefloaderpath = new File(savePath);
    
12.                 if (!savefloaderpath.exists()) {
    
13.                         savefloaderpath.mkdir();
    
14.                 }
    
15.                 try {
    
16.                         // 初始化合并workbook并载入合并模板
    
17.                         Workbook spanWorkbook = new Workbook();
    
18.                         spanWorkbook.open(FillInSpreadApplication.class.getClassLoader().getResourceAsStream("static/span/一级行汇总.xlsx"));
    
19.                         SalesData datasource = new SalesData();
    
20.                         datasource.salary = new ArrayList<SalesRecord>();
    
21. 
    
22.                         // #region Init Data
    
23.                         SalesRecord record1 = new SalesRecord();
    
24.                         record1.name = "二级行A";
    
25.                         record1.project = "1. 当年成本列支数（财务口径）";
    
26.                         record1.salariesPayable = 6000;
    
27.                         record1.otherSubjectsSalariesPayable = 3000;
    
28.                         record1.employeeWelfare = 2000;
    
29.                         record1.educationFunds = 4000;
    
30.                         record1.educationFundsOtherSubjects = 6000;
    
31.                         record1.tradeUnionFundsOtherSubjects = 7000;
    
32.                         datasource.salary.add(record1);
    
33. 
    
34.                         SalesRecord record2 = new SalesRecord();
    
35.                         record2.name = "二级行B";
    
36.                         record2.project = "1. 当年成本列支数（财务口径）";
    
37.                         record2.salariesPayable = 5000;
    
38.                         record2.otherSubjectsSalariesPayable = 3000;
    
39.                         record2.employeeWelfare = 2000;
    
40.                         record2.educationFunds = 4000;
    
41.                         record2.educationFundsOtherSubjects = 6000;
    
42.                         record2.tradeUnionFundsOtherSubjects = 7000;
    
43.                         datasource.salary.add(record2);
    
44. 
    
45.                         SalesRecord record3 = new SalesRecord();
    
46.                         record3.name = "二级行C";
    
47.                         record3.project = "1. 当年成本列支数（财务口径）";
    
48.                         record3.salariesPayable = 5000;
    
49.                         record3.otherSubjectsSalariesPayable = 3000;
    
50.                         record3.employeeWelfare = 2000;
    
51.                         record3.educationFunds = 4000;
    
52.                         record3.educationFundsOtherSubjects = 6000;
    
53.                         record3.tradeUnionFundsOtherSubjects = 7000;
    
54.                         datasource.salary.add(record3);
    
55. 
    
56.                         SalesRecord record4 = new SalesRecord();
    
57.                         record4.name = "二级行A";
    
58.                         record4.project = "2. 加：其他成本支出科目中核算金额";
    
59.                         record4.salariesPayable = 5000;
    
60.                         record4.otherSubjectsSalariesPayable = 3000;
    
61.                         record4.employeeWelfare = 2000;
    
62.                         record4.educationFunds = 4000;
    
63.                         record4.educationFundsOtherSubjects = 6000;
    
64.                         record4.tradeUnionFundsOtherSubjects = 7000;
    
65.                         datasource.salary.add(record4);
    
66. 
    
67.                         SalesRecord record5 = new SalesRecord();
    
68.                         record5.name = "二级行B";
    
69.                         record5.project = "2. 加：其他成本支出科目中核算金额";
    
70.                         record5.salariesPayable = 5000;
    
71.                         record5.otherSubjectsSalariesPayable = 3000;
    
72.                         record5.employeeWelfare = 2000;
    
73.                         record5.educationFunds = 4000;
    
74.                         record5.educationFundsOtherSubjects = 6000;
    
75.                         record5.tradeUnionFundsOtherSubjects = 7000;
    
76.                         datasource.salary.add(record5);
    
77. 
    
78.                         SalesRecord record6 = new SalesRecord();
    
79.                         record6.name = "二级行C";
    
80.                         record6.project = "2. 加：其他成本支出科目中核算金额";
    
81.                         record6.salariesPayable = 5000;
    
82.                         record6.otherSubjectsSalariesPayable = 3000;
    
83.                         record6.employeeWelfare = 2000;
    
84.                         record6.educationFunds = 4000;
    
85.                         record6.educationFundsOtherSubjects = 6000;
    
86.                         record6.tradeUnionFundsOtherSubjects = 7000;
    
87.                         datasource.salary.add(record6);
    
88. 
    
89.                         // #endregion
    
90.                         System.out.println(datasource.salary.size());
    
91. 
    
92.                         // Init template global settings
    
93.                         spanWorkbook.getNames().add("TemplateOptions.KeepLineSize", "true");
    
94. 
    
95.                         // Add data source
    
96.                         spanWorkbook.addDataSource("ds", datasource);
    
97.                         // Invoke to process the template
    
98.                         spanWorkbook.processTemplate();
    
99. 
    
100.                         // Save to an excel file
     
101.                         spanWorkbook.save(savePath + File.separator + "一级行汇总结果.xlsx");
     
102.                         resultMap.put("合并成功", 1);
     
103.                 } catch (Exception e) {
     
104.                         resultMap.put("isSuccess", result);
     
105.                         resultMap.put("errorMessage", e.getMessage());
     
106.                         e.printStackTrace();
     
107.                 }
     
108.                 return resultMap;
     
109.         }

复制代码

4.加载模板扩展后的报表：

1.   // 展示一级行汇总结果
   
2.                         $("#loadSpanA").click(function () {
   
3.                                 var excelIo = new GC.Spread.Excel.IO();
   
4.                                 // Download Excel file
   
5.                                 var excelFilePath = 'span/一级行汇总结果.xlsx';
   
6.                                 var xhr = new XMLHttpRequest();
   
7.                                 xhr.open('GET', excelFilePath, true);
   
8.                                 xhr.responseType = 'blob';
   
9.                                 xhr.onload = function (e) {
   
10.                                         if (this.status == 200) {
    
11.                                                 // get binary data as a response
    
12.                                                 var blob = this.response;
    
13.                                                 // convert Excel to JSON
    
14.                                                 excelIo.open(blob, function (json) {
    
15.                                                         var workbookObj = json;
    
16.                                                         spread.fromJSON(workbookObj);
    
17.                                                         spread.setActiveSheet("工资三费");
    
18.                                                 }, function (e) {
    
19.                                                         // process error
    
20.                                                         alert(e.errorMessage);
    
21.                                                 }, {});
    
22.                                         }
    
23.                                 };
    
24.                                 xhr.send();
    
25.                         })

复制代码

SpreadJS的展示效果如下：

非常的方便，完整代码见附件