使用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。
一个便宜的方法是使用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
- 我在哪里可以得到Angular ui-grid选定的项目
- $ http请求不会在angular度CORS中跨域发送cookie
- 如何在AngularJS中用ng-repeatdynamic生成ng-model =“my _ {{$ index}}”？
- Angularjs – 将parameter passing给指令
- 我应该使用Angular UI Bootstrap还是纯Bootstrap 3？
- 将Angular HTTP.get函数转换为一个服务
- AngularJs ReferenceError：$ http没有定义
- ngModel。$ modelValue和ngModel。$ viewValue之间有什么区别
- $资源中删除和删除方法的区别？
