I have an empty XML table in my SAPUi5 application:
<m:Table id="testdata3"></m:Table>
In my JavaScript controller, I use the SheetJS library to upload an Excel file and then read the data into the table, using "sheet_to_html".
When debugging my code I have all the data together and also my console.log call shows me data in the innerHTML of my table. But for some reason, the table stays empty. So basically nothing happens in the front-end. I feel like I'm missing a "return" or "populate" or something in that direction to load the table with the new data.
Any ideas?
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
oTable.innerHTML = XLSX.utils.sheet_to_html(worksheet);
console.log(oTable.innerHTML);
}
Update: code for model
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
var oModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oModel,'myResultModel');
that.getView().byId("testdata3").setModel(oModel);
var oColumns = [];
*// I'm iterating over the column names and pushing them to my table works fine, but I'm then stuck with proceeding and pushing the rest of the data to my table..*
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(cells).length; i++) {
if( cells[i].indexOf('1') > -1)
{
oColumns.push(worksheet[cells[i]].v);
}
}
var oColumnNames = [];
$.each(oColumns, function(i, value) {
oColumnNames.push({
Text: oColumns[i]
});
});
oModel.setProperty("/columnNames", oColumnNames);
oModel.setProperty("/columnNames", oColumnNames);
var oTemplate = new Column({
header: new Label({
text: "{Text}"
})
});
oTable.bindAggregation("columns", "/columns", oTemplate);
};
};
},
EDIT here is an other attempt I tried, when debugging everything looks fine but the table stays empty anyways..
onXLSXupload : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]);
},
_import : function(file) {
console.log(file);
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
wb.SheetNames.forEach(function(first_sheet_name) {
var roa = XLSX.utils.sheet_to_json(wb.Sheets[first_sheet_name]);
if(roa.length > 0){
result[first_sheet_name] = roa;
}
});
var data = result[Object.keys(result)[0]];
for(var i=0; i<data.length; i++){
var excelRows = new sap.m.ColumnListItem({cells:[
new sap.m.Text({text: data[i][Object.keys(data[i])[0]]}),
new sap.m.Text({text: data[i][Object.keys(data[i])[1]]})
]});
that.getView().byId("testdata3").addItem(excelRows );
}
};
};
},
I'm simply struggling to find the right approach of binding the items to my table.. I'm wondering if it has something to do with my XML view or the controller file..
Update with answer from #MatthijsMennen Now still struggling because the items are only populated in one column
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
var aColumns = that.getColumnNames(worksheet);
var aData = that.getRowData(worksheet, result);alert(aData);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumns,
rows: aData
});
oTable.setModel(oModel);
oTable.bindAggregation("columns", "/columns", function(index, context) {
return new sap.m.Column({
header: new sap.m.Label({
text: context.getObject().columnId
})
});
});
oTable.bindAggregation("items", "/rows", function(index, context){
return new sap.m.ColumnListItem({
cells: [
new sap.m.Text({text: context.getObject().cellId })
]
});
});
};
};
},
getColumnNames: function(worksheet) {
var oColumns = [];
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(cells).length; i++) {
if (cells[i].indexOf("1") > -1) {
var columnName = worksheet[cells[i]].v;
oColumns.push({
columnId: columnName
});
}
}
return oColumns;
},
getRowData: function(worksheet, result) {
var roa = XLSX.utils.sheet_to_json(worksheet);
if(roa.length > 0){
result[worksheet] = roa;
}
var data = result[Object.keys(result)[0]];
console.log(data.length);
var i; var x;
var oCells = []
for(i = 0; i < data.length; i++){
for(var x = 0; x < data.length; x ++) {
var excelRows = data[i][Object.keys(data[i])[x]];
console.log(data[i][Object.keys(data[i])[x]])
oCells.push({ cellId: excelRows});
}
}
return oCells;
},
update with for loop for columnlistitems
oTable.bindAggregation("items", "/rows", function(index, context) {
var roa = XLSX.utils.sheet_to_json(worksheet);
if(roa.length > 0){
result[worksheet] = roa;
}
for(var i = 0; i < roa.length; i++){
return new sap.m.ColumnListItem({
cells: [
new Text({ text :context.getObject().cellId })
]
})
};
});
I created a small example here with SheetJS. The column names get extracted from the worksheet, but you still need to get the rows from the worksheet. I added some dummy data for the rows.
Hope this helps.
View
<Table id="testdata3" />
<u:FileUploader change="onChange" buttonText="Upload" />
Controller
onChange: function(oEvent) {
var file = oEvent.getParameter("files")[0];
var oTable = this.byId("testdata3");
var reader = new FileReader();
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var data = e.target.result;
var wb = XLSX.read(data, {
type: "binary"
});
var firstSheetName = wb.SheetNames[0];
var worksheet = wb.Sheets[firstSheetName];
var oModel = new sap.ui.model.json.JSONModel();
var aColumns = that.getColumnNames(worksheet);
var aData = that.getRowData(worksheet);
var aCells = that.getCells(aColumns);
oModel.setData({
columns: aColumns,
rows: aData
});
oTable.setModel(oModel);
oTable.bindAggregation("columns", "/columns", function(index, context) {
return new sap.m.Column({
header: new sap.m.Label({
text: context.getObject().columnId
})
});
});
oTable.bindAggregation("items", "/rows", new sap.m.ColumnListItem({
// CHANGE ACCORDINGLY OR MAKE DYNAMIC
cells: aCells
}));
};
},
getColumnNames: function(worksheet) {
var oColumns = [];
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(cells).length; i++) {
if (cells[i].indexOf("1") > -1) {
var columnName = worksheet[cells[i]].v;
oColumns.push({
columnId: columnName
});
}
}
return oColumns;
},
getRowData: function() {
var aItems = [];
// DO YOUR THING HERE
aItems[0] = {
value0: "testvalue0",
value1: "testvalue1",
value2: "testvalue2",
value3: "testvalue3",
value4: "testvalue4"
};
return aItems;
},
getCells: function(aColumns) {
var cells = [];
for (var i = 0; i < aColumns.length; i++) {
cells[i] = new sap.m.Text({
text: "{value" + i + "}"
});
}
return cells;
}
Excel example
In one of my projects I needed to create table dynamically from controller.
Here is how I did hoping it helps you:
VIEW
<Table id="tableTask"
inset="false">
<headerToolbar>
<OverflowToolbar id="otbSubheader">
<ToolbarSpacer/>
<SearchField id="taskSearchBox" search="onSearchOrClearPressed" liveChange="onSearchTasks" showSearchButton="false">
<layoutData><OverflowToolbarLayoutData minWidth="200px" maxWidth="300px" shrinkable="true"/></layoutData>
</SearchField>
</OverflowToolbar>
</headerToolbar>
<columns>
<!-- Columns created in controller -->
</columns>
<items>
<ColumnListItem id="columnsListItemTask" press="onPressListItem" type="Navigation">
<cells>
<!-- Cells created in controller -->
</cells>
</ColumnListItem>
</items>
</Table>
CONTROLLER
onInit: function(){
...
// Get columns aggregation of table
let oColumns = this.getView().byId('columnsListItemTask');
// Define table cells
let cellToAdd1 = new sap.m.Text('textCell1',{
text: "{path/to/modelValue1}"
});
let cellToAdd2 = new sap.m.Text('textCell2',{
text: "{path/to/modelValue2}"
});
let cellToAdd3 = new sap.m.Text('textCell3',{
text: "{path/to/modelValue3}"
});
let cellToAdd4 = new sap.m.Text('textCell4',{
text: "{path/to/modelValue4}"
});
// Add cells (in this case 4 columns)
oColumns.addCell(cellToAdd1);
oColumns.addCell(cellToAdd2);
oColumns.addCell(cellToAdd3);
oColumns.addCell(cellToAdd4);
var jsonModel = new JSONModel(yourModel);
this.getView().setModel(jsonModel);
// Get Table by id
let oTable = this.getView().byId('tableTask');
oTable.removeAllItems(); //Remove old items if present
oTable.removeAllAggregation(); //Remove aggregations
oTable.bindAggregation('items', {
path:'/rowsData', // field name of you JSONModel containing data rows
template: oColumns, // rowTemplate of cells
});
...
}
UPDATE
You can do a for loop to add dynamically any number of columns:
onInit: function(){
...
// Get columns aggregation of table
let oColumns = this.getView().byId('columnsListItemTask');
let cellToAdd;
// This for loop in each columns I need to generate
// (in my case they are defined in a database and I get it with AJAX request)
for(let key in allCellsToGenearte){
cellToAdd = new sap.m.Text({
text: allCellsToGenearte["modelPath"]
});
oColumns.addCell(cellToAdd);
}
// Get Table by id
let oTable = this.getView().byId('tableTask');
oTable.removeAllItems(); //Remove old items if present
oTable.removeAllAggregation(); //Remove aggregations
oTable.bindAggregation('items', {
path:'/rowsData', // field name of JSON Model containing data rows
template: oColumns, // rowTemplate of cells
});
...
}
Related
I am trying to read excel file in Javascript with the plugin xlsx.js . I can read all cell values except the first value. Here is my code:
let numArr = [];
selectFile(event) {
let reader = new FileReader();
reader.onload = () => {
const data = reader.result;
const workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach((sheetName) => {
// Here is your object
const XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
// var json_object = JSON.stringify(XL_row_object);
for (let i = 0; i < XL_row_object.length; i++) {
// this.groupNumsArr.push(XL_row_object[i]['number']);
const theNum = Object.values(XL_row_object[i])[0].toString();
numArr.push(theNum);
}
});
};
reader.readAsBinaryString(event.target.files[0]); }
The api gives first row as key so You can try this
for (let i = 0; i < XL_row_object.length; i++) {
var theNum = '';
if(i == 0)
{
theNum = Object.keys(XL_row_object[i])[0].toString();
numArr.push(theNum);
}
// this.groupNumsArr.push(XL_row_object[i]['number']);
theNum = Object.values(XL_row_object[i])[0].toString();
numArr.push(theNum);
}
I am trying let the user drop multiple excel file and extract desired values from each one of the files and upload it to website ONE FILE AT A TIME.
My code is not working, and I am assuming this is because of the callback problem..
Could anybody help?
Edit: I also added my uploadFile function. I very much appreciate your help.
for(var i = 0; i < fileList.length; i++) {
//console.log(fileList[i]["file"]);
var reader = new FileReader();
var f = fileList[i]["file"];
//var fName = fileList[i]["fileName"];
var excelObject = fileList[i];
reader.onload = function(ev) {
var data = ev.target.result;
if(!rABS) data = new Uint8Array(data);
var wb = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
var einAddress = "B3";
var engCodeAddress = "B1";
var goAddress = "B2";
var errMsg = tabName + " tab or required value is missing";
// Worksheet with the necessary info
try{
var ws = wb.Sheets[tabName];
var ein_cell = ws[einAddress];
ein = (ein_cell ? ein_cell.v.toString() : undefined);
var eng_cell = ws[engCodeAddress];
engCode = (eng_cell ? eng_cell.v.toString() : undefined);
var go_cell = ws[goAddress];
goLocator = (go_cell ? go_cell.v.toString() : undefined);
if(ein == undefined || engCode == undefined || goLocator == undefined){
hasValues = false;
}
excelObject["EngagementCode"] = engCode;
excelObject["GoSystem"] = goLocator;
excelObject["EIN"] = ein;
if(hasValues && isValid){
uploadFile(fileList[i], userInfo);
} else {
noValueErrorHandler(errMsg);
}
} catch(err){
hasValues = false;
}
};
if(rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
}
function uploadFile(f, userInfo) {
// Define the folder path for this example.
var serverRelativeUrlToFolder = listName;
// Get info of the file to be uploaded
var file = f;
var fileInput = file["file"];
var newName = file["fileName"];
var ein = file["EIN"];
var engCode = file["EngagementCode"];
var email = userInfo;
var goLocator = file["GoSystem"];
console.log("file: " + file);
// Get the server URL.
var serverUrl = _spPageContextInfo.siteAbsoluteUrl + "/StatusTracker";
// Initiate method calls using jQuery promises.
// Get the local file as an array buffer.
var getFile = getFileBuffer(fileInput);
getFile.done(function (arrayBuffer) {
// Add the file to the SharePoint folder.
var addFile = addFileToFolder(arrayBuffer, newName);
addFile.done(function (file, status, xhr) {
// Get the list item that corresponds to the uploaded file.
var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
getItem.done(function (listItem, status, xhr) {
// Change the display name and title of the list item.
var changeItem = updateListItem(listItem.d.__metadata);
changeItem.done(function (data, status, xhr) {
processedCount += 1;
if (processedCount < fileCount) {
uploadFile(fileList[processedCount], email);
} else if (processedCount == fileCount){
$("#dropbox").text("Done, drop your next file");
$("#ADMNGrid").data("kendoGrid").dataSource.read();
fileList = [];
alert("Total of " + processedCount + " items are processed!");
}
// Refresh kendo grid and change back the message and empty fileList
//$("#dropbox").text("Drag your Fund/Lower Tier workpaper here ...");
//location.reload(true);
});
changeItem.fail(onError);
});
getItem.fail(onError);
});
addFile.fail(onError);
});
getFile.fail(onError);
You might put the whole thing into an async function and await a Promise for each iteration, forcing the files to be processed in serial. You didn't post your uploadFile, but if you have it return a Promise that resolves once it's done, you could do the following:
async fn() {
for (var i = 0; i < fileList.length; i++) {
await new Promise((resolve, reject) => {
//console.log(fileList[i]["file"]);
var reader = new FileReader();
var f = fileList[i]["file"];
//var fName = fileList[i]["fileName"];
var excelObject = fileList[i];
reader.onload = function(ev) {
var data = ev.target.result;
if (!rABS) data = new Uint8Array(data);
var wb = XLSX.read(data, {
type: rABS ? 'binary' : 'array'
});
var einAddress = "B3";
var engCodeAddress = "B1";
var goAddress = "B2";
var errMsg = tabName + " tab or required value is missing";
// Worksheet with the necessary info
try {
var ws = wb.Sheets[tabName];
var ein_cell = ws[einAddress];
ein = (ein_cell ? ein_cell.v.toString() : undefined);
var eng_cell = ws[engCodeAddress];
engCode = (eng_cell ? eng_cell.v.toString() : undefined);
var go_cell = ws[goAddress];
goLocator = (go_cell ? go_cell.v.toString() : undefined);
if (ein == undefined || engCode == undefined || goLocator == undefined) {
hasValues = false;
}
excelObject["EngagementCode"] = engCode;
excelObject["GoSystem"] = goLocator;
excelObject["EIN"] = ein;
if (hasValues && isValid) {
uploadFile(fileList[i], userInfo)
.then(resolve);
} else {
noValueErrorHandler(errMsg);
reject();
}
} catch (err) {
hasValues = false;
reject();
}
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
});
}
}
I want to get a file from client side to parse it into json object and send it to the backend, i am able to parse the file thanks to Sheet-js.
My problem is i can not get files from client side
I am using js, SAPUI5
handleUploadPress: function(oEvent) {
var oFileUploader = this.getView().byId("fileUploader");
if (!oFileUploader.getValue().toString()) {
MessageToast.show("Choose a xlsx file first");
return;
}
var url = "/resources/test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = [];
for (var i = 0; i !== data.length; ++i) {
arr[i] = String.fromCharCode(data[i]);
}
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {
type: "binary"
});
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
var json = XLSX.utils.sheet_to_json(worksheet, {
raw: true
});
var jsonStr = JSON.stringify(json);
MessageBox.show("JSON String: " + jsonStr);
};
oReq.send();
},
The answer is:
UploadFile.view.xml
<VBox>
<u:FileUploader id="idfileUploader" typeMissmatch="handleTypeMissmatch" change="handleValueChange" maximumFileSize="10" fileSizeExceed="handleFileSize" maximumFilenameLength="50" filenameLengthExceed="handleFileNameLength" multiple="false" width="50%" sameFilenameAllowed="false" buttonText="Browse" fileType="CSV" style="Emphasized" placeholder="Choose a CSV file"/>
<Button text="Upload your file" press="onUpload" type="Emphasized"/>
</VBox>
UploadFile.controller.js
handleTypeMissmatch: function(oEvent) {
var aFileTypes = oEvent.getSource().getFileType();
jQuery.each(aFileTypes, function(key, value) {
aFileTypes[key] = "*." + value;
});
var sSupportedFileTypes = aFileTypes.join(", ");
MessageToast.show("The file type *." + oEvent.getParameter("fileType") +
" is not supported. Choose one of the following types: " +
sSupportedFileTypes);
},
handleValueChange: function(oEvent) {
MessageToast.show("Press 'Upload File' to upload file '" + oEvent.getParameter("newValue") + "'");
},
handleFileSize: function(oEvent) {
MessageToast.show("The file size should not exceed 10 MB.");
},
handleFileNameLength: function(oEvent) {
MessageToast.show("The file name should be less than that.");
},
onUpload: function(e) {
var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
var fU = this.getView().byId("idfileUploader");
var domRef = fU.getFocusDomRef();
var file = domRef.files[0];
var reader = new FileReader();
var params = "EmployeesJson=";
reader.onload = function(oEvent) {
var strCSV = oEvent.target.result;
var arrCSV = strCSV.match(/[\w .]+(?=,?)/g);
var noOfCols = 6;
var headerRow = arrCSV.splice(0, noOfCols);
var data = [];
while (arrCSV.length > 0) {
var obj = {};
var row = arrCSV.splice(0, noOfCols);
for (var i = 0; i < row.length; i++) {
obj[headerRow[i]] = row[i].trim();
}
data.push(obj);
}
var Len = data.length;
data.reverse();
params += "[";
for (var j = 0; j < Len; j++) {
params += JSON.stringify(data.pop()) + ", ";
}
params = params.substring(0, params.length - 2);
params += "]";
// MessageBox.show(params);
var http = new XMLHttpRequest();
var url = oResourceBundle.getText("UploadEmployeesFile").toString();
http.onreadystatechange = function() {
if (http.readyState === 4 && http.status === 200) {
var json = JSON.parse(http.responseText);
var status = json.status.toString();
switch (status) {
case "Success":
MessageToast.show("Data is uploaded succesfully.");
break;
default:
MessageToast.show("Data was not uploaded.");
}
}
};
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(params);
};
reader.readAsBinaryString(file);
}
I have tried to pass the uploaded files value to apex method but facing some issues in javascript logic.
I have added alert after reader.onload = function(e) but didn't get any alert when I'm hitting this javascript function.
HTML CODE
function SponsorshipLetter() {
var files = document.getElementById('fileUpload');
var appId = getCookie('apex__app');
var fileName = 'Passport';
var reader = new FileReader();
reader.file = files[0];
reader.onload = function(e) {
alert('Hello 1' + document.getElementById('fileUpload').value);
var att = new sforce.SObject("Attachment");
att = fileName;
att.ContentType = this.file.type;
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
att.Body = (new sforce.Base64Binary(binary)).toString();
alert('attt');
PAP_Finances.sponsorFileUpload(att.Name, att.Body, att.ContentType, appId,
function(result, event) {
return 'Success';
});
}
reader.readAsDataURL(e.target.files[0]);
}
I am parsing xlsx with js-xlxs .
var url = "test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {type:"binary"});
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function(y) { /* iterate through sheets */
var worksheet = workbook.Sheets[y];
for (z in worksheet) {
/* all keys that do not begin with "!" correspond to cell addresses */
if(z[0] === '!') continue;
console.log(y + "!" + z + "=" + JSON.stringify(worksheet[z].v));
}
});
}
oReq.send();
which is working fine for me. i can traverse each single cell, but need to parse specific range with in xlsx like from row: A160-Q160 and column: 160-202
i read about range in documentation but not getting it , how to set the same with my example
I did it like below. Its working for me now
function handleFile(e) {
if(!window.FileReader) {
console.log("Browser doesn't support FileReader");
return;
}
var files = e.target.files, i, f,
rowRange = ["A"],//xls column array
/*setting range in xlsx, to parse and get with in range*/
lowerRangeRow = 160,//xls rows lower range
upperRangeRow = 202,//xls rows upper range
row1;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function(y) { /* iterate through sheets */
var worksheet = workbook.Sheets[y];
for (z in worksheet){
/* all keys that do not begin with "!" correspond to cell addresses */
if(z[0] === '!') continue;
row1 = z.replace(/[^0-9]/g, '');
if(rowRange.indexOf(z.charAt(0)) > -1 && (row1>=lowerRangeRow && row1<=upperRangeRow)){
//console.log(worksheet[z].v.trim());
li = document.createElement("li");
li.appendChild(document.createTextNode(worksheet[z].v.trim()));
document.getElementById("xlsxDataList").appendChild(li);
}
}
});
};
reader.readAsBinaryString(f);
}
}
document.getElementById("file").addEventListener('change', handleFile, false);