繁体   English   中英

淘汰赛中的js-xlsx-将工作表数据传回到页面/ viewmodel

[英]js-xlsx in knockout - pass sheet data back to page/viewmodel

使用js-xlsx包,我从页面中成功读取了一个excel文件,但是我一直试图将数据传递回链上,以便页面可以使用它。

我在viewmodel中编写了一个函数,该函数会在输入更改时触发:

<input name="xlfile" id="xlf"  class="left" data-bind="event: { change: function () { handleXLSfile($element) } }" style="width: 200px;" type="file">

运行该文件的快速预检查,然后调用XLSX函数,如下所示:

        self.XLSdata = [];
        self.EnrollstoValidate = [];


        self.handleXLSfile = function (element) {
            self.validManifest(false);
            //var rABS = true;
            var rABS = typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString;

            var files = element.files;
            var f = files[0];
            var fileNamePieces = f.name.split('.');
            if (fileNamePieces.length <= 0) {
                self.validManifest(false);
            }
            else {
                var extension = fileNamePieces[fileNamePieces.length - 1];
                if (extension == "xls" || extension == "xlsx") {

                    self.validManifest(true);

                    do_xlsfile(f);

                }
            }
        };

我在自己的js文件中具有相关的XLSX函数,因为我有三个页面将检索相似的文件,并且拥有一个函数,使每个函数都调用这三个函数并传回数据更有意义。

var global_wb;

X = XLSX;

var process_wb = (function () {
    var strOUT = "";

    var to_json = function to_json(workbook) {
        var result = {};
        workbook.SheetNames.forEach(function (sheetName) {
            var roa = X.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 });
            if (roa.length) result[sheetName] = roa;
        });
        return result;
    };

    return function process_wb(wb) {
        global_wb = wb;
        var output = "";
        output = to_json(wb);
        strOUT = output;
        if (typeof console !== 'undefined') console.log("output", new Date());
        return output;
    };
})();

var do_xlsfile = (function (f) {
    var rABS = typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString;

    return function do_file(f) {
        var XLSoutput = "";
        var rABS = false;
        var reader = new FileReader();
        reader.onload = function (e) {
            if (typeof console !== 'undefined') console.log("onload", new Date());
            var data = e.target.result;
            data = new Uint8Array(data);
            XLSoutput = process_wb(X.read(data, { type: rABS ? 'binary' : 'array' }));
            //self.XLSdata = XLSoutput;
        };
        reader.readAsArrayBuffer(f);
    };
})();

在遍历它的过程中,似乎在函数完成调用后将启动reader.onload的内容,因此我无法尝试执行返回操作。

我试图弄清楚如何/在哪里可以将XLSoutput对象传递回Knockout区域,以便可以对其进行操作,在屏幕上显示它,等等。

这可能是因为Knockout相对较新,并且对xlsx软件包的工作方式知之甚少,以至于我无法理解。

当然,除了Knockout之外,js-xlsx软件包中几乎所有其他语言中都有该死的示例。

我有一个修复程序,但似乎很笨拙,并且不确定是否有更好的解决方案。

我添加了一个全局变量,以后可以访问

self.handleXLSfile = function (element) {
            self.validManifest(false);
            global_BulkPage = "one2M";

在上面的reader.onload中,我添加了一个函数,该函数获取值并将数据发送到正确的viewmodel

  var Send2KO = function (XLSoutput) {
        switch (global_BulkPage) {
            case "one2M":
                ad.views.bulk_one2m.viewModel.XLSdata = XLSoutput;
                break;
            case "m2M":
                ad.views.bulk_m2m.viewModel.XLSdata = XLSoutput;
                break;
            case "delete":
                ad.views.bulk_delete.viewModel.XLSdata = XLSoutput;
                break;
            default:
            //no action
        }
    }

因此,我可以在淘汰赛级别上访问数据-现在,我只需要找出正确的方法即可从那里访问数据。 但这是另一个问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM