将文件导入SpreadJS

下面的部分描述了将Excel (.xlsx)和JSON文件(JSON或ssjson)导入SpreadJS的步骤。

除SpreadJS API外，还采用了以下方法:

步骤1: 从JSON字符串加载spread实例

创建 importJSON 函数，使用 fromJSON 方法从指定的JSON字符串加载Spread实例。
使用 focus 方法来聚焦工作簿组件。

//1: 创建 importJSON()
function importJSON(spreadJson) {
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    if (spreadJson.version && spreadJson.sheets) {
        // 从JSON字符串spreadJSON加载对象
        ss.fromJSON(spreadJson);
        // 聚焦工作簿组件
        ss.focus();
    }
}

步骤 2: 导入Excel文件

创建 importSpreadFromExcel 函数，调用 xcelIO.open 方法，通过将Excel文件转换为JSON字符串来导入它。
调用 importJSON 函数从excelIO创建的JSON数据字符串中使用excelIO.open方法加载SpreadJS实例。

//2: 创建 importSpreadFromExcel()
function importSpreadFromExcel(file, options) {
    // 加载一个Excel文件来绘制SpreadJS实例
    excelIO.open(
        file,
        function (json) {
            // 调用步骤1中创建的importJson()来导入Excel文件
            importJSON(json);
        },
        function (e) {
            console.log(e);
        },
        options
    );
}

步骤 3: 导入JSON文件到SpreadJS实例

创建 importSpreadFromJSON 函数导入一个JSON文件。
创建一个新的 FileReader 并将其存储在'reader'变量中。
使用FileReader.readAsText函数将JSON文件的内容读取为字符串。onload事件在FileReader完成后触发。
调用 importSuccessCallback 方法，使用 JSON.parse 将结果解析为JavaScript对象。

//3: 创建 importSpreadFromJSON()
function importSpreadFromJSON(file) {
    function importSuccessCallback(responseText) {
        // 解析JSON字符串
        var spreadJson = JSON.parse(responseText);
        // 执行importJSON方法从解析的JSON字符串加载SpreadJS实例
        importJSON(spreadJson);
    }
    // 创建一个文件来读取JSON字符串
    var reader = new FileReader();
    // 当下面的readAsText()完成时，将触发此事件以成功返回回调
    reader.onload = function () {
        importSuccessCallback(this.result);
    };
    // 触发readAsText()方法
    // 这将读取文件的内容，并在完成时触发加载事件
    reader.readAsText(file);
    return true;
}

步骤 4: 确定导入文件的格式

创建 importFile 函数，该函数以导入文件的文件名作为参数，通过查找文件名中最后一个"."的索引来确定文件类型，如Excel或JSON。
创建一个If/Else语句来确定是否使用 importSpreadFromJSON 或 importSpreadFromExcel 函数来导入文件。

//4: 创建importFile()函数来决定一个文件是.xlsx还是.JSON/.SSJSON
function importFile(file) {
    // 获取所选文件的名称
    var fileName = file.name;
    // 获取文件名的最后一个“.”的索引位置
    var index = fileName.lastIndexOf(".");
    // 返回最后一个“.”索引位置的文件名的最后一部分。
    var fileExt = fileName.substr(index + 1).toLowerCase();
    // 根据文件扩展名确定要调用的导入扩展函数
    if (fileExt === "json" || fileExt === "ssjson") {
        importSpreadFromJSON(file);
    } else if (fileExt === "xlsx") {
        importSpreadFromExcel(file);
    }
}

步骤 5: 添加HTML输入元素

当使用id为 fileSelector 的HTML输入选择文件时，创建 processfilesselected 函数来执行 importFile 函数

//5: 创建 processFileSelected()
function processFileSelected() {
    //使用id fileSelector从HTML输入中获取选中的文件
    var fileSelector = document.getElementById("fileSelector");
    var file = fileSelector.files[0];
    if (!file) return false;
    fileSelector.innerHTML = "";
    // 在选择文件时执行importFile()
    return importFile(file);
}

以上代码的输出如下所示:

Excel文件导入

JSON文件导入