spreadjs依次读取多文件

在实际项目中，用户一次会上传多个文件，需要利用SpreadJS依次去读取每一个文件中的特定内容。这时，大部分用户第一反应会这么写：

1. window.onload = () => {
   
2.     var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
   
3.     let excelio = new GC.Spread.Excel.IO()
   
4.     document.getElementById('upload').onclick = () => {
   
5.         getFiles()
   
6.     }
   
7. 
   
8.     getFiles = () => {
   
9.          let files = document.getElementById('file').files
   
10.          Array.from(files).forEach((ele,index) => {
    
11.              openFile(ele,index)
    
12.          });
    
13.     }
    
14. 
    
15.     openFile = (file,index) => {
    
16.         excelio.open(file,(json) => {
    
17.             spread.fromJSON(json)
    
18.         })
    
19.         console.log(`open${index}`)
    
20.       }
    
21.     }

复制代码

但这个时候执行代码，发现只能读到第一个文件，接着就会报错。
这是因为excelio的open方法其实是一个异步的过程，在循环中用同一个excelio打开不同的文件，有可能上一步的异步操作还没有执行完成。
如果要使用同一个excelio打开不同的文件，则需要将打开下一个文件的操作写在上一个excelio执行成功后的回调函数中。
但这样书写其实是比较麻烦的，因此我们可以考虑使用不同的excelio去打开不同的文档，只要将创建excelio的代码写在openFile函数中即可。
调整完成后的代码为：

1. window.onload = () => {
   
2.     var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
   
3.     document.getElementById('upload').onclick = () => {
   
4.         getFiles()
   
5.     }
   
6.     getFiles = () => {
   
7.         let files = document.getElementById('file').files
   
8.         Array.from(files).forEach((ele,index) => {
   
9.             openFile(ele,index)
   
10.         });
    
11.     }
    
12.     openFile = (file,index) => {
    
13.        let excelio = new GC.Spread.Excel.IO()
    
14.         excelio.open(file,(json) => {
    
15.             spread.fromJSON(json)
    
16.         })
    
17.         console.log(`open${index}`)
    
18.     }
    
19.         }

复制代码

简单的调整之后，就可以使用spreadjs依次去读取文件啦~

完整测试示例参考：

spread.fromJSON(json)会覆盖之前加载过的excel文件，如果想要上传多个文件之后有选择的去选取哪个文件加载，可以创建一个动态数组暂时存储这些json，然后通过一个下拉框去主动选择哪个展示在页面上：
window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
    let excelio = new GC.Spread.Excel.IO()
    var arr = [];// 动态数组用于导入加载的文件
    _getElementById('loadExcel').onclick = () => {
        getFiles()
    }

    getFiles = () => {
        var selector = _getElementById("mySelect");
        let files = _getElementById('files').files
        Array.from(files).forEach((ele, index) => {
            arr.push(ele);
            var opt = new Option(ele.name, index);// 前面时展示的内容，后面是value，添加下拉框选项
            selector.options.add(opt);
        });
    }

    // 监听下拉选框的改变
    _getElementById("mySelect").addEventListener("change", function () {
        var file = arr[this.value];// 通过事先存储的index实现动态展现
        let excelio = new GC.Spread.Excel.IO();
        excelio.open(file, (json) => {
            spread.fromJSON(json);// 但是这里会对之前加载的内容进行覆盖
        })
        console.log("Selected option value: ", this.value);
    });
}

Richard.Huang 发表于 2023-8-2 12:00
spread.fromJSON(json)会覆盖之前加载过的excel文件，如果想要上传多个文件之后有选择的去选取哪个文件加载 ...