javascript - 使用 AngularJS 从 Excel 导入

Question

我正在尝试将 Excel 导入 ui-grid。我正在尝试使用 js xlsx 库。我可以将 xlsx 转换为 JSON，但我不确定如何将 xlsx 填充到 ui-grid 中。下面是ui-grid：

$scope.samplesGridOptions = {
    enableColumnResizing: true,
    enableRowSelection: true,
    multiSelect: false,
    enableGridMenu: true,
    enableCellEditOnFocus: true,
    columnDefs: [
        { field: 'externalID', displayName: 'External ID' },
        { field: 'apexLotNum', displayName: 'APEX Lot' },
        {
            field: 'chamberName',
            displayName: 'Chamber Name',
            editType: 'dropdown',
            editableCellTemplate: 'ui-grid/dropdownEditor',
            enableCellEdit: true, editDropdownOptionsArray: $scope.chamberNameList,
            editDropdownIdLabel: 'value',
            editDropdownValueLabel: 'value'
        }
    ],
    gridMenuCustomItems: [],
    onRegisterApi: function (gridApi) {
        $scope.samplesGridAPI = gridApi;
        $scope.samplesGridOptions.data = $scope.virtualSampleList;
    }
};

我正在尝试使用下面的 js-xlsx 库来解析加载的 excel 文件。但不确定如何将其推送到 ui-grid 中，这是 Javascripting 和库的新手。

$scope.ParseExcelDataAndSave = function () {
    var file = $scope.SelectedFileForUpload;
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, { type: 'binary' });
            var sheetName = workbook.SheetNames[0];
            var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var jsonData = JSON.stringify(excelData);
            if (jsonData.length > 0) {
                    **//Here I am not sure how can I populate the ui-grid from the JSON**
            }
            else {
                $scope.Message = "No data found";
            }
        }
        reader.onerror = function (ex) {
            console.log(ex);
        }
        reader.readAsBinaryString(file);
    }
}

标签： javascriptangularjsangularjs-directiveimport-from-exceljs-xlsx

Answer 1

这是js-xlsx文档中给出的示例：¹

$http({
    method:'GET',
    url:'https://sheetjs.com/pres.xlsx',
    responseType:'arraybuffer'
}).then(function(response) {
    var wb = XLSX.read(response.data, {type:"array"});
    var d = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    $scope.data = d;
}, function(err) { console.log(err); });

对于文件使用：

function fileToArrayPromise(file) {
    var promise = $q(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            resolve(data);
        }
        reader.onerror = function (ex) {
            reject(ex);
        }
        reader.readAsArrayBuffer(file);
    })
    return promise;
}

fileToArrayPromise(file)
  .then(function(data) {
    var wb = XLSX.read(data, {type:"array"});
    var d = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    $scope.data = d;
}, function(err) {
    console.log(err);
    throw err;
});

有关详细信息，请参阅

• SheetJS 演示 - AngularJS