使用angularjs导出到xls

我正在处理angular度js应用程序,我陷入了一种情况,我必须使用angular度js将数据导出到Xls。 我已经在互联网上search了很多出口function或angularjs的任何库,所以我可以做到这一点,或者至less我可以得到如何导出的想法。 我没有任何代码或工作在这里显示。

我需要build议。 请帮助我。

提前致谢。

更新:

我有一个数据是一个对象的数组,我在表中的UI上迭代。 我的后端是node.js和前端是angularjs。

我的问题是,如果我们有从服务器的数据,我正在UI上使用,我怎样才能使用相同的数据导出到XLS使用angularjs。 我不想在后端再次打电话来提取数据并导出。

在现有的表格中,用户可以selectcheckbox(任意数量的行或所有行)来将数据提取到Xls。

在node.js中,我使用了名为:Excel的节点模块,它在nodemodules站点上可用。

我的数据是这样的:

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

我想要使​​用angularjs或任何angularjs库的解决scheme。

7 Solutions collect form web for “使用angularjs导出到xls”

一个便宜的方法是使用Angular生成一个<table>并使用FileSaver.js将该表输出为一个.xls文件供用户下载。 Excel将能够以电子表格的forms打开HTML表格。

 <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> 

导出电话:

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

演示: http : //jsfiddle.net/TheSharpieOne/XNVj3/1/

更新演示与checkboxfunction和问题的数据。 演示: http : //jsfiddle.net/TheSharpieOne/XNVj3/3/

您可以尝试Alasql JavaScript库,它可以与XLSX.js库一起使用,以便轻松导出Angular.js数据。 这是带有exportData()函数的控制器的一个例子:

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

在jsFiddle中查看完整的HTML和JavaScript代码。

更新另一个着色单元格的例子 。

还需要包含两个库:

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

如果您将数据加载到ng-grid中,则可以使用CSV导出插件。 该插件创build一个button,将网格数据作为csv放入href标签中。

http://angular-ui.github.io/ng-grid/

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

在库重命名时更新链接:

Github链接: https : //github.com/angular-ui/ui-grid

图书馆页面: http : //ui-grid.info/

有关csv导出的文档: http : //ui-grid.info/docs/#/tutorial/206_exporting_data

当我需要类似的东西时,ng-csv和其他解决scheme并没有完全帮助。 我的数据是在$范围内,并没有表格显示它。 所以,我build立了一个指令,使用Sheet.js(xslsx.js)和FileSaver.js将给定的数据导出到Excel中。

这是我的解决scheme包装。

例如,数据是:

 $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" } ]; 

我不得不在控制器中为我的指令准备数据作为数组的数组:

 $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]); }); 

最后,添加指令到我的模板。 它显示一个button。 (看小提琴 )

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

一个起点可能是使用这个指令(ng-csv)只是下载文件为csv,这是excel可以理解的东西

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

也许你可以修改这个代码(更新后的链接):

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

尽pipe它似乎XMLSS(它会在打开文件之前发出警告,如果select打开文件,它会正确打开)

 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)) } })() 

用下面的自定义文件名试试

 $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(); }; 
 $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