使用ng-csv将HTML页面中的表格导出到Excel
我使用Yeoman Angular发生器做了一个简单的项目。 我从这个API做了一个表。
这是我的main.html：
<div ng-controller="MainCtrl"> <button type="button" ng-csv="getArray" csv-header="getHeader()" filename="test.csv">Export</button> </div> <div class="row"> <div class="col-xs-12 table"> <table class="table table-striped"> <thead> <tr> <th>No.</th> <th>ID Pel.</th> <th>Cust ID</th> <th>Meter SN</th> <th>Readingpoint</th> <th>Last Dial</th> <th>Status</th> </tr> </thead> <tbody> <tr ng-repeat="pop in tableData"> <td>{{pop.No}}</td> <td>{{pop.idPel}}</td> <td>{{pop.custID}}</td> <td>{{pop.uSN}}</td> <td><a ui-sref="app.bill_detail3">{{pop.metername}}</a></td> <td>17-02-2015 | 16.00</td> <td><span class="label label-success">Online</span></td> </tr> </tbody> </table> </div> <!-- /.col --> </div> 这是我的服务/ main.js
angular.module('simpleApp') .service('main', function ($http, $q, ApiEndpoint) { // AngularJS will instantiate a singleton by calling "new" on this function var service = {}; service.getPopList = getPopList; function getPopList(){ var q = $q.defer(); var req = { method: 'GET', url: ApiEndpoint.url + 'getpop/list' } $http(req) .success(function(data) { q.resolve(data); }) .error(function(error){ q.reject(error); }) return q.promise; }; return service; });
这是我的控制器/ main.js：
angular.module('simpleApp') .controller('MainCtrl', function ($scope, main) { this.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; $scope.getHeader = function () {return ["No.", "ID Pel.", "Cust ID", "Meter SN", "Readingpoint", "Last Dial", "Status"]}; $scope.tableData = []; $scope.meterCount = 0; main.getPopList().then(function(data){ var no = 0; for (var i = 0; i < data.length; i++) { for (var j = 0; j < data[i].d.readpoint.length; j++) { $scope.tableData.push({ 'No': ++no, '_id': data[i]._id, 'siteID': data[i].d.siteID, 'uSN': data[i].d.readpoint[j].uSN, 'idPel': data[i].d.readpoint[j].idPel, 'custID': data[i].d.readpoint[j].custID, 'metername': data[i].d.readpoint[j].metername }); } } $scope.getArray = [{a:'No', b:'_id', c:'siteID', d:'uSN', e:'idPel', f:'custID', g:'metername'}, {a:'No', b:'_id', c:'siteID', d:'uSN', e:'idPel', f:'custID', g:'metername'}]; $scope.meterCount = no; }, function(){ }); });
网页看起来像这样： 
我想将所有的表格内容（标题和内容本身）导出到Excel（.xls）。
我怎样才能做到这一点？
哦，我现在正在使用ng-csv。 结果现在是这样的： 
将您的buttonng-csv属性值更改为tableData
<button type="button" ng-csv="tableData" csv-header="getHeader()" filename="test.csv">Export</button>