[英]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.