如何在Angular JS中導出HTML表格？

-1

我在HTML文件中創建了一個簡單的表格。現在我需要使它在Angular JS中以PDF或Excel或CSV格式導出？有沒有簡單的方法來做到這一點？如何在Angular JS中導出HTML表格？

2017-02-21 Teddu

使用諸如UI網http://ui-grid.info/ –

這裏是一個導出html表格的例子，您可以通過瀏覽器保存爲pdf，csv，xlsx等支持的格式。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function ($scope) { 
 
    $scope.exportData = function() { 
 
     var blob = new Blob([document.getElementById('exportable').innerHTML], { 
 
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
 
     }); 
 
     saveAs(blob, "Report Example.xls"); 
 
    }; 
 

 
    $scope.items = [{ 
 
     name: "John Smith", 
 
     email: "[email protected]", 
 
     dob: "1985-10-10" 
 
    }, { 
 
     name: "Jane Smith", 
 
     email: "[email protected]", 
 
     dob: "1988-12-22" 
 
    }, { 
 
     name: "Jan Smith", 
 
     email: "[email protected]", 
 
     dob: "2010-01-02" 
 
    }, { 
 
     name: "Jake Smith", 
 
     email: "[email protected]", 
 
     dob: "2009-03-21" 
 
    }, { 
 
     name: "Josh Smith", 
 
     email: "[email protected]", 
 
     dob: "2011-12-12" 
 
    }, { 
 
     name: "Jessie Smith", 
 
     email: "[email protected]", 
 
     dob: "2004-10-12" 
 
    }] 
 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
<div ng-controller="myCtrl"> 
 
    <button ng-click="exportData()">Export</button> 
 
    <br /> 
 
    <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> 
 
</div> 
 
</body> 
 
</html>

來源

2017-02-21 08:54:57 nivas

自定義網格太感謝你了..這個工作:) – Teddu

我們能做到這一點的PDF嗎？ – Teddu

你需要'jsPdf'庫來保存'html'爲'pdf'，這裏是示例http://plnkr.co/edit/5NonsdQ23nXwFchV01sB?p=preview – nivas

如何在Angular JS中導出HTML表格？

回答

相關問題