spreadjs依次读取多文件

收藏

本帖最后由 Winny 于 2021-8-6 14:40 编辑

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

window.onload = () => {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
let excelio = new GC.Spread.Excel.IO()
document.getElementById('upload').onclick = () => {
getFiles()
}
getFiles = () => {
let files = document.getElementById('file').files
Array.from(files).forEach((ele,index) => {
openFile(ele,index)
});
}
openFile = (file,index) => {
excelio.open(file,(json) => {
spread.fromJSON(json)
})
console.log(`open${index}`)
}
}

复制代码

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

window.onload = () => {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
document.getElementById('upload').onclick = () => {
getFiles()
}
getFiles = () => {
let files = document.getElementById('file').files
Array.from(files).forEach((ele,index) => {
openFile(ele,index)
});
}
openFile = (file,index) => {
let excelio = new GC.Spread.Excel.IO()
excelio.open(file,(json) => {
spread.fromJSON(json)
})
console.log(`open${index}`)
}
}

复制代码

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

完整测试示例参考：

Richard.Huang · Richard.Huang

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);
});
}

Joestar.Xu · Joestar.Xu

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

		自动登录	找回密码
密码			立即注册

spreadjs依次读取多文件

2 个回复

SpreadJS 认证

SpreadJS 高级认证