Export to xls using angularjs

Question

I am working on an angular js application and I am stuck in a situation where I have to export data to Xls using angular js. I searched a lot on the Internet for export functions or any library for angular js, so I can do this or at least get an idea of ​​how to export. I have no code or work to show here.

I need some suggestions. Please help me with this.

Thanks in advance.

Update:

I have data that is an array of objects, and I repeat this in the user interface in a table. My backend is node.js and frontend angular js.

My problem is that if we have data from the server and I use in the user interface, how can I use the same data to export to Xls using angular js. I do not want to call the backend again to extract the data and export it.

In the existing table, the user can select the checkbox (any number of rows or all rows) to retrieve data in Xls.

In node.js, I used the node module, whose name is Excel, and it is available on the nodemodules website.

My data is as follows:

"data": [ { "Name": "ANC101", "Date": "10/02/2014", "Terms": ["samsung", "nokia": "apple"] },{ "Name": "ABC102", "Date": "10/02/2014", "Terms": ["motrolla", "nokia": "iPhone"] } ] 

I want a solution using angular or any library of angles.

Answer 1

A cheap way to do this is to use Angular to generate the <table> and use FileSaver.js to display the table as an .xls file for the user to download. Excel will be able to open the HTML table as a table.

 <div id="exportable"> <table width="100%"> <thead> <tr> <th>Name</th> <th>Email</th> <th>DoB</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.email}}</td> <td>{{item.dob | date:'MM/dd/yy'}}</td> </tr> </tbody> </table> </div> 

Export Call:

 var blob = new Blob([document.getElementById('exportable').innerHTML], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); saveAs(blob, "Report.xls"); }; 

Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

Updated demo with checkbox functionality and polling data. Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/

Answer 2

You can try the Alasql JavaScript library, which can work with the XLSX.js library to easily export Angular.js data. This is an example of a controller with the exportData () function:

 function myCtrl($scope) { $scope.exportData = function () { alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]); }; $scope.items = [{ name: "John Smith", email: "[e-mail]", dob: "1985-10-10" }, { name: "Jane Smith", email: "[e-mail]", dob: "1988-12-22" }]; } 

See the full HTML and JavaScript code for this example in jsFiddle.

UPDATED Another example with color cells .

You also need to enable two libraries:

• alasql.min.js
• xlsx.core.min.js

Answer 3

When I needed something, ng-csv and other solutions did not help here. My data was in $ scope, and there are no tables showing this. So, I built a directive to export data to Excel using Sheet.js (xslsx.js) and FileSaver.js.

Here is my solution packed.

For example, data:

 $scope.jsonToExport = [ { "col1data": "1", "col2data": "Fight Club", "col3data": "Brad Pitt" }, { "col1data": "2", "col2data": "Matrix Series", "col3data": "Keanu Reeves" }, { "col1data": "3", "col2data": "V for Vendetta", "col3data": "Hugo Weaving" } ]; 

I had to prepare the data as an array of arrays for my directive in my controller:

 $scope.exportData = []; // Headers: $scope.exportData.push(["#", "Movie", "Actor"]); // Data: angular.forEach($scope.jsonToExport, function(value, key) { $scope.exportData.push([value.col1data, value.col2data, value.col3data]); }); 

Finally, add the directive to my template. He shows a button. (See violin ).

 <div excel-export export-data="exportData" file-name="{{fileName}}"></div> 

Answer 4

If you upload your data to an ng grid, you can use the CSV export plugin. The plugin creates a button with grid data as csv inside the href tag.

http://angular-ui.imtqy.com/ng-grid/

https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js

Updating links when renaming a library:

Github Link: https://github.com/angular-ui/ui-grid

Library page: http://ui-grid.info/

Csv export documentation: http://ui-grid.info/docs/#/tutorial/206_exporting_data

Answer 5

One starting point might be to use this directive (ng-csv), just upload the file as csv and something excellent can understand

http://ngmodules.org/modules/ng-csv

Perhaps you can adapt this code (updated link):

http://jsfiddle.net/Sourabh_/5ups6z84/2/

Most likely, XMLSS (it warns you before opening the file, if you decide to open the file, it will open correctly)

 var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })() 

Answer 6

Try below with a custom file name:

 $scope.exportData= function(){ var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } var table = document.getElementById("searchResult"); var filters = $('.ng-table-filters').remove(); var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; $('.ng-table-sort-header').after(filters) ; var url = uri + base64(format(template, ctx)); var a = document.createElement('a'); a.href = url; a.download = 'Exported_Table.xls'; a.click(); }; 

Answer 7

 $scope.ExportExcel= function () { //function define in html tag //export to excel file var tab_text = '<table border="1px" style="font-size:20px" ">'; var textRange; var j = 0; var tab = document.getElementById('TableExcel'); // id of table var lines = tab.rows.length; // the first headline of the table if (lines > 0) { tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>'; } // table data lines, loop starting from 1 for (j = 1 ; j < lines; j++) { tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>"; } tab_text = tab_text + "</table>"; tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params // console.log(tab_text); // aktivate so see the result (press F12 in browser) var fileName = 'report.xls' var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) if (window.navigator.msSaveBlob) { // IE 10+ window.navigator.msSaveOrOpenBlob(exceldata, fileName); //$scope.DataNullEventDetails = true; } else { var link = document.createElement('a'); //create link download file link.href = window.URL.createObjectURL(exceldata); // set url for link download link.setAttribute('download', fileName); //set attribute for link created document.body.appendChild(link); link.click(); document.body.removeChild(link); } } //html of button 

Answer 8

I had this problem and I made a tool to export an HTML table to a CSV file. The problem I encountered with FileSaver.js is that this tool captures a table with html format, so some people cannot open the file in excel or google. All you have to do is export the js file and then call the function. This is github's address https://github.com/snake404/tableToCSV if anyone has the same problem.

Answer 9

We need a JSON file that we need to export to the angularjs controller, and we need to be able to call from an HTML file. We will look at both. But before we get started, we need to first add two files to our corner library. These two files are json-export-excel.js and filesaver.js. Moreover, we need to include the dependency in the angular module. So, the first two steps can be summarized as follows:

1) Add json-export.js and filesaver.js to your corner library.

2) Include the ngJsonExportExcel dependency in your corner module.

  var myapp = angular.module('myapp', ['ngJsonExportExcel']) 

Now that we have included the necessary files, we can move on to the changes that need to be made to the HTML file and the controller. We assume that JSON is created on the controller either manually or by calling the backend.

HTML:

 Current Page as Excel All Pages as Excel 

In the application with which I worked, I brought page results from the backend. Therefore, I had two options for exporting to Excel. One for the current page and one for all data. As soon as the user selects an option, the call goes to the controller, which prepares the JSON (list). Each object in the list forms a line in Excel.

Find out more at - https://www.oodlestechnologies.com/blogs/Export-to-excel-using-AngularJS