CODEWITHSUNDEEP
angularjshtmluser-interface
Apuroop
Apuroop

Reputation: 116

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

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 .

Upvotes: 0

Views: 7878

Answers (1)

Helvio
Helvio

Reputation: 747

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

Upvotes: 1

Related Questions