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依次去读取文件啦~
完整测试示例参考：
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;// 通过事先存储的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文件，如果想要上传多个文件之后有选择的去选取哪个文件加载 ...
:hjyzw:
页:
[1]