Question

我使用js-xlsx插件来解析excel文件中的JSON。我正在从多个excel文件解析JSON，我想使用相同的解析函数在多个下拉列表中加载结果。我有两个上传文件输入和两个相应的下拉菜单。我只能在第一个下拉菜单中获得xlFileName和sheetNames。如果我想使用第二个文件上传输入上传不同的excel文件，并希望在第二个下拉列表中为相应的excel文件加载xlFileName和sheetNames，我该如何使用相同的JS函数来实现这个。提前致谢。（我已经尝试过切换机箱来获取上传文件输入的ID但不知道如何正确完成）

HTML：

<input type="file" style="display:none;" name="files" id="inputFile1" />
<span data-bind="text: fileNameXl1"></span>
<select id="dropdown3" required="required" class="form-control select2" data-bind="options:xlnames,value:selectedSheetname1, 
                                                 selectedOptions: chosenFile,optionsCaption:'Please Select Sheet Name'">
</select>
<input type="file" style="display:none;" name="files" id="inputFile2" />
<span data-bind="text: fileNameXl1"></span>
<h4 class="header-title m-t-0 m-b-30">Select Sheet name(Macro):</h4>
<select id="dropdown4" required="required" class="form-control select2" data-bind="options:xlnames1,value:selectedSheetname2,
                                                 selectedOptions: chosenFile,optionsCaption:'Please Select Sheet Name'">
</select>

JS：

self.selectedSheetname1 = ko.observable("");
self.selectedSheetname2 = ko.observable();
self.selectedSheetname3 = ko.observable();
self.chosenFile = ko.observable();
self.xlnames = ko.observableArray([]);
self.xlnames1 = ko.observableArray([]);
self.fileNameXl1 = ko.observable();

self.handleFile = function(e) {
            var files = e.target.files;
            var f = files[0];
            {
                var reader = new FileReader();
                xlFileName = f.name;
                self.fileNameXl1(xlFileName);
                console.log(xlFileName);
                reader.onload = function(e) {
                    if(typeof console !== 'undefined') console.log("onload", new Date());
                    var data = e.target.result;
                    var wb;
                    var arr = fixdata(data);
                    wb = X.read(btoa(arr), {type: 'base64'});
                    process_wb(wb);
                }
            }
            reader.readAsArrayBuffer(f);
        };
        self.fixdata = function(data) {
            var o = "", l = 0, w = 10240;
            for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
            o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
            return o;
        };
        self.process_wb = function(wb) {
            var output = "";
            output = JSON.stringify(to_json(wb), 2, 2);
            var parse = JSON.parse(output);
            sheetNames = Object.keys(parse);
            console.log("this is output");
            console.log(sheetNames);
            self.xlnames(sheetNames);
            if(typeof console !== 'undefined') console.log("output", new Date());
        };
        self.to_json = function(workbook) {
            var result = {};
            workbook.SheetNames.forEach(function(sheetName) {
                var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                if(roa.length > 0){
                    result[sheetName] = roa;
                }
            });
            return result;
        };
        self.loadSheetNamesB25 = function(e){
            self.xlnames([]);
            self.handleFile(e);

        };
        self.loadSheetNamesB41 = function(e){
            self.xlnames1([]);
            self.xlnames2([]);
            self.handleFile(e);
        };

if(xlf1.addEventListener) xlf1.addEventListener('change', self.loadSheetNamesB25, false);
if(xlf2.addEventListener) xlf2.addEventListener('change', self.loadSheetNamesB41, false);

对多个文件上传事件使用相同的功能

0 个答案: