Import a table from an Excel Sheet into HTML table , using AngularJS

Question

How do I import an excel sheet into a HTML table , such that every row can be converted into an Object, based on the Column Names. Using Angular JS

P.S: The Objects are needed for the future sorted tables .

You may find some answers here : http://stackoverflow.com/questions/18450259/paste-into-nggrid-from-excel and here : http://stackoverflow.com/questions/30765389/angularjs-ui-grid-import-xlsx-data-best-approach — Mistalis, Jun 14 '16 at 11:31

score 1 · Answer 1 · edited Oct 28 '16 at 21:05

I have developed a component for that. Please take a look if it helps you: https://github.com/Helvio88/angular-xlsx-model

Using

<input type="file" xlsx-model="excel">

will give you the ability to select a file.
For multiple files:

<input type="file" xlsx-model="excel" multiple>

It can be further extended to filter out specific extensions and so on. Refer to http://www.w3schools.com/jsref/dom_obj_fileupload.asp

Once you select a file, an Angular JSON object named after the xlsx-model attribute (in this case 'excel') will be created in this format:

$scope.excel (multiple files):

{
    "file1.xlsx": {
        "Sheet1": [
            {
                "Col1Name": "Row1Col1_Value",
                "Col2Name": "Row1Col2_Value"
            },
            {
                "Col1Name": "Row2Col1_Value",
                "Col2Name": "Row2Col2_Value"
            }
        ],
        "Sheet2" : [...]
    },
    "file2.xlsx": {...}
}

That model is valid if you've selected multiple files. For a single file, it's slightly different.
$scope.excel (single file):

{
    "Sheet1": [
        {
            "Col1Name": "Row1Col1_Value",
            "Col2Name": "Row1Col2_Value"
        },
        {
            "Col1Name": "Row2Col1_Value",
            "Col2Name": "Row2Col2_Value"
        }
    ],
    "Sheet2" : [...]
}

Playground: http://plnkr.co/edit/inETA0PcxIkm4EmS9qjD?p=preview

Import a table from an Excel Sheet into HTML table , using AngularJS

1 Answers1