Vue框架下SpreadJS V16导入导出新变化

背景:
Excel文件的导入导出是一种常见且便捷的数据处理方式。通过使用Excel，用户可以将数据从在线的SpreadJS导出为Excel文件，或者将Excel文件导入到SpreadJS中进行在线预览。
那些经常使用SpreadJS进行Excel文件导入导出操作的用户对于gc.spread.Excelio这个包并不陌生，它是我们导出Excel文件的核心依赖。如果没有它，就无法实现对Excel文件的导入导出。
这个依赖的上架可以追溯到SpreadJS V9.0版本。在此之前，SpreadJS的Excel导入/导出功能要求将其安装在网络服务器上。用户想要导出Excel文件就必须依赖后端，这对于网络延迟和开发成本都有一定的负担。因此，在V9.0版本中，我们将导入导出Excel文件的功能作为一个组件，并提供公共接口以方便用户调用。

告别Excel IO
使用ExcelIO的用户都知道，要将在线文件导出为Excel文件，首先需要创建ExcelIO的实例，然后使用ExcelIO的save方法将在线文件导出为SSJSON格式，最后使用FileSaver库的saveAs方法将SSJSON数据保存为Excel文件。代码如下：

1. var ExcelIO = new GC.Spread.Excel.IO();
   
2. ExcelIO.save(SSJSON, function (b) {
   
3.     window.saveAs(b, "导出.XLSX");
   
4. }, function (e) {
   
5.     console.log("导出失败");
   
6. });

复制代码

随着越来越多的用户使用SpreadJS，我们收到了越来越多的使用大数据量和复杂格式文件的案例。这些大数据量的文件给产品的性能带来了新的挑战。如何提升性能成为决定用户在处理大数据量文件导入导出时体验的关键。因此，在SpreadJS V16.0正式发布后，我们推出了全新的文件结构——SJS。这种新的结构不仅大幅减少了文档的体积，而且平均提升了导入导出性能高达50%。这为未来涉及金融行业和协同编辑等大数据量场景下对低延迟性能的要求提供了架构级的基础支持。而对于之前为了解决前端导入导出需求而推出的ExcelIO，则到了告别的时候了。

拥抱新IO
为了应对未来ExcelIO在导入导出性能方面所面临的挑战，我们在SpreadJS v16.0版本中正式采用了一种新的文件格式来解决这个问题。这种新的.SJS格式是一个压缩文件，它包含了多个较小的JSON文件，类似于Excel的XML结构。
这种新的文件结构能够支持大型Excel文件，并将它们导出为体积更小的文件。此外，如果一个Excel文件中有许多工作表，您可以通过按需加载工作表的方式实现快速加载。为了使用这种新的文件格式，您无需再导入ExcelIO模块，而是只需导入IO插件即可：

1. "@grapecity/spread-sheets-io": "^16.2.4",

复制代码

此时，可能会有一些用户会有疑问，即我们推出了SJS文件格式后是否不再支持之前的Excel的XLSX文件格式。答案是否定的。需要注意的是，新的SJS文件格式是可选的，您仍然可以选择使用.SSJSON格式或XLSX格式的文件。但是，如果您希望获得更小的文件体积和更快的性能，我们建议您使用.SJS文件格式。SJS格式和非SJS格式文件的导入导出方法也有所不同，前者使用open和save方法，后者使用import和export方法。代码如下：

1. export default {
   
2.   name: "App",
   
3.   data: function () {
   
4.     return {
   
5.       spread: null,
   
6.       selectedFile: null
   
7.     };
   
8.   },
   
9.   methods: {
   
10.     spreadInitHandle(value) {
    
11.       this.spread = value;
    
12.     },
    
13.     handleFileUpload(e) {
    
14.       this.selectedFile = e.target.files[0];
    
15.     },
    
16.     uploadFile() {
    
17.       let spread = this.spread
    
18.       // 使用FormData对象来构建文件上传请求
    
19.       let formData = new FormData();
    
20.       formData.append('file', this.selectedFile);
    
21. 
    
22.       // 解析文件名和文件类型
    
23.       const fileName = this.selectedFile.name;
    
24.       const fileExtension = fileName.split('.').pop();
    
25.       if (fileExtension == "sjs") {
    
26.         spread.open(this.selectedFile, function () { }, function () { });
    
27.       } else {
    
28.         spread.import(this.selectedFile, function () { }, function () { });
    
29.       }
    
30.     },
    
31. 
    
32.     saveExcel() {
    
33.       let spread = this.spread
    
34.       console.log(spread);
    
35.       spread.export(function (blob) { saveAs(blob, "test.xlsx"); }, function () { });
    
36.     },
    
37.     saveSJS() {
    
38.       let spread = this.spread
    
39.       spread.save(function (blob) { saveAs(blob, "test.sjs"); }, function () { });
    
40.     },
    
41.     saveSSJSON() {
    
42.       let spread = this.spread
    
43.       console.log(spread.toJSON());
    
44.     }
    
45.   },
    
46. };

复制代码

所以说16版本之后可以舍弃掉ExcelIo库了吗？

AirCat 发表于 2023-11-14 10:34
所以说16版本之后可以舍弃掉ExcelIo库了吗？

是的，我们在新版本中完全不需要添加ExcelIO依赖了，但为了很多老用户的需要，该依赖仍然存在也仍然可以使用。但为了效率，还是建议直接使用新版本的导入导出实现方式

AirCat 发表于 2023-11-14 10:34
所以说16版本之后可以舍弃掉ExcelIo库了吗？

新的特性将不会在ExcelIO中增加，但如果有Bug的话还是会修复。