SpreadJS + Vue + Axios 实现服务端加载sjs、ssjson、xlsx

在这篇文章中提到了如何SpreadJS + Vue + Axios 实现服务端加载、上传Excel 。

在此基础上，本文聊一聊如何SpreadJS + Vue + Axios 实现服务端加载、上传sjs、ssjson以及xlsx文件 。
关于SJS，可以查看这篇文章，https://gcdn.grapecity.com.cn/showtopic-156384-1-1.html。
以及相关学习指南：https://en.onboarding.grapecityd ... mat/overview/purejs
在前端页面上，添加一个sjs文件，然后通过以下代码进行加载。

1. spread.open(file, function () {
   
2.    // success callback to do something
   
3. }, function (e) {
   
4.    console.log(e); // error callback
   
5. });

复制代码

通过以下代码进行导出

1. spread.save(function (blob) {
   
2.    // save blob to a file
   
3.    saveAs(blob, fileName);
   
4. }, function (e) {
   
5.    console.log(e);
   
6. });

复制代码

同时，在v16版本中，对于导入导出ssjson与xlsx文件，有一个新的api接口：spread.import，spread.export

1. spread.import(file, function () {
   
2.    // success callback to do something
   
3. }, function (e) {
   
4.    console.log(e); // error callback
   
5. }, {
   
6.    fileType: GC.Spread.Sheets.FileType.excel
   
7. });
   
8. spread.export(function (blob) {
   
9.    // save blob to a file
   
10.    saveAs(blob, fileName);
    
11. }, function (e) {
    
12.    console.log(e);
    
13. }, {
    
14.    fileType: GC.Spread.Sheets.FileType.excel,
    
15.    includeBindingSource: true
    
16. });

复制代码

以上两种导入接口，第一个参数均为file文件，如果此时不想要前端去上传文件，想从后端获取文件流，然后进行加载，这时候怎么办呢？
本示例用axios获取接口数据，

1. axios({
   
2.         method: "post",
   
3.         url: "spread/importFile",
   
4.         data: fd,
   
5.         responseType: "blob",
   
6.         headers: {
   
7.           cache: false,
   
8.           "Access-Control-Allow-Origin": "*",
   
9.           'X-Requested-With': 'XMLHttpRequest',
   
10.           crossDomain: true
    
11.         }
    
12.       }).then(
    
13.         response => {},err=>{console.log(err)
    
14. 
    
15. });

复制代码

sjs:

1. var blob = new Blob([response.data], {type:'application/zip'});
   
2. console.time('渲染时间')
   
3. this.spread.open(blob,
   
4.   function () {
   
5.     console.timeEnd('渲染时间')
   
6.   },
   
7.   function (e) {
   
8.     console.log(e)
   
9.   },
   
10.   {openMode:GC.Spread.Sheets.OpenMode.incremental}
    
11. );

复制代码

ssjson:

1. var blob = new Blob([response.data], {type:'text/plain;charset=utf-8'});
   
2. tempFileType = GC.Spread.Sheets.FileType.ssjson;
   
3. options = {
   
4. incrementalLoad: {
   
5.   loading: function (progress, args) {
   
6.     let sheetName = args.sheet.name();
   
7.     console.log(progress, sheetName);
   
8.   },
   
9.   loaded: function () {
   
10.     console.timeEnd('渲染时间')
    
11.   }
    
12. },
    
13. fileType: tempFileType
    
14. },
    
15. }
    
16. console.time('渲染时间')
    
17. spread.import(blob, function () {}, function (e) {
    
18. console.log(e); // error callback
    
19. }, options);

复制代码

xlsx:

1. var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
   
2. options = {
   
3.   openMode:GC.Spread.Sheets.OpenMode.incremental,
   
4.   fileType: GC.Spread.Sheets.FileType.excel,
   
5. progress: (progressArgs) => {
   
6.     console.log(progressArgs)
   
7. },
   
8. }
   
9. console.time('渲染时间')
   
10. spread.import(blob, function () {
    
11. console.timeEnd('渲染时间')
    
12. }, function (e) {
    
13. console.log(e); // error callback
    
14. }, options);

复制代码

其前端代码与后端代码见附件。
关于如何使用，见如下动图：