export html table to text file using angularjs

Question

I'm working on a project that requires exporting html table into text file. Below is a simplified version of the HTML code :

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Date1</th>
            <th>Date2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>{{employee.code}}</td>
            <td>{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.age}}</td>
            <td><input type="text"  class="datepicker" ng-model="employee.date1"  datepicker /></td>
            <td><input type="text"  class="datepicker" ng-model="employee.date2" datepicker/></td>
        </tr>
    </tbody>
</table>

The expected outcome should look like this in a text file (with columns aligned nicely):

Code   firstName    lastName  Age        Date1         Date2
001       x            y      25      2016/01/01      2016/04/04
...

I tried the "classical" way with jquery but it doesnt interpret values inside my td's. So im looking for an angular directive or something like that to overcome such issue. Thanks..

here is the problem when i try to export data inside {{ }} : ![print screen](http://i.imgur.com/qrkwaKE.png) — Daniel, May 01 '16 at 12:51

Tyler.z.yang · Accepted Answer · 2016-05-01T13:38:35.210

0

A pretty straight forward way to do it would be using the FileSaver.js

Assuming your table is like this,

<table id="demo-table">
    <thead>
        <tr>
            <th>Code</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Date1</th>
            <th>Date2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>{{employee.code}}</td>
            <td>{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.age}}</td>
            <td><input type="text"  class="datepicker" ng-model="employee.date1"  datepicker /></td>
            <td><input type="text"  class="datepicker" ng-model="employee.date2" datepicker/></td>
        </tr>
    </tbody>
</table>

After this table have been generated, simply invoke the code below,

var ele = document.getElementById('demo-table');
var blob = new Blob([ele.innerText], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "demo-table.csv");
};

For other configurations, check the document of FileSaver.js.

Hope this would solve your problem.

edited May 01 '16 at 13:38

answered May 01 '16 at 11:00

Tyler.z.yang

2,402
1
18
31

@Daniel Just replace the innerHTML to innerText, and you need to make sure the table has been generated which means you can invoke this code with `setTimeout`. Can you post your sample code to jsFiddle? – Tyler.z.yang May 01 '16 at 13:37
Thanks .. Now it works but it doesnt for Date1 and Date2 column which is normal because they have an input field inside td. Any idea to solve this issue ? – Daniel May 01 '16 at 14:59
I think you can try to add ` Date 1` into that td to print out the date. – Tyler.z.yang May 01 '16 at 15:26
It prints out when i use 'display : inline' instead of 'display :none ' However i have duplicated value in the same field – Daniel May 01 '16 at 15:39
Then you can hide this element in the normal mode, and display this element when user wants to output the table.(e.g. show the span before invoke print func) – Tyler.z.yang May 01 '16 at 15:46
Another solution would be, set the color of the span to white(or your background color). So user cannot see this text, but it can be printed out. Anyway, these are tricky solutions, but easy to implement. – Tyler.z.yang May 01 '16 at 15:47
Than you very much Tyler ! – Daniel May 01 '16 at 16:10
My pleasure to help. : ) – Tyler.z.yang May 01 '16 at 16:13
Can i configure the file where table is downloaded ? – Daniel May 01 '16 at 16:24
According to [this answer](http://stackoverflow.com/questions/4453798/specify-default-download-folder-possibly-with-javascript), this violate user's security policy. So we can only suggest the filename. – Tyler.z.yang May 02 '16 at 02:00

export html table to text file using angularjs

1 Answers1