离线填报下数据源和模板的导出方案

背景

---

我们通过数据绑定实现的填报都是需要先绑定一个空的数据源，然后填报结束后通过getDataSource()方法获取到这个数据源，并传给后端进行持久化。我们在后端的存储也往往是数据源和空模板进行分开存储的。但会偶尔有小伙伴有这种离线填报的需求，我无法跟后端建立连接，但是我需要提前将大量的数据填写好，等待可以传输给后端时再给后端传输数据。这期间就会有，导出填报内容，再导入的情景，在第二次导入后，如果我们的逻辑是绑定一个空数据源，那么用户填报的数据就丢失了，如果不填报数据源 ，那么就无法将用户填报的数据拿出来传给后端进行持久化，这种情况下应该怎么做呢？这里我们可以借助导出的json这个自由的结构体来实现。

实现方式

---

1. 导入文件

1. var reader = new FileReader();
   
2. let jsonFile = _getElementById("jsonFile").files[0];
   
3. reader.addEventListener("loadend", function (e) {
   
4.     var json = JSON.parse(reader.result);
   
5.     spread.fromJSON(json);
   
6.     let data = json.mydatasource || {};
   
7.     let sheet = spread.getActiveSheet()
   
8.     let len = sheet.tables.all().length;
   
9.     for (let i = 0; i < len; i++) {
   
10.         let bp = sheet.tables.all()[i].bindingPath();
    
11.         if (!(bp in data)) {
    
12.             data[bp] = [{}];
    
13.         }
    
14.     }
    
15.     let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
    
16.     sheet.setDataSource(source);
    
17. })
    
18. reader.readAsText(jsonFile);

复制代码

2. 导出文件

1. // 处理数据源
   
2. let json = spread.toJSON()
   
3. let sheet = spread.getActiveSheet()
   
4. let mydatasource = {}
   
5. if (sheet.getDataSource()) {
   
6.     mydatasource = sheet.getDataSource().getSource();
   
7. }
   
8. let outputspread = new GC.Spread.Sheets.Workbook();
   
9. json.mydatasource = mydatasource;
   
10. // 将字符串转换为Blob对象
    
11. let blob = new Blob([JSON.stringify(json)], { type: 'application/json' });
    
12. // 创建一个指向该Blob的URL
    
13. let fileUrl = URL.createObjectURL(blob);
    
14. // 创建一个临时的a标签用于触发下载
    
15. let downloadLink = document.createElement('a');
    
16. downloadLink.href = fileUrl;
    
17. downloadLink.download = _getElementById("exportFileName").value; // 指定下载文件名
    
18. 
    
19. // 将a标签插入到文档中并模拟点击进行下载
    
20. document.body.appendChild(downloadLink);
    
21. downloadLink.click();
    
22. 
    
23. // 清理临时的URL和下载链接
    
24. document.body.removeChild(downloadLink);
    
25. URL.revokeObjectURL(fileUrl);

复制代码

实现效果

完整代码