在AngularJS中以CSV，Excel，PDF格式导出数据

我想在我的应用程序中添加CSV，Excel，PDF格式function的导出表格数据。

我正在使用angularjs 1.2.16构build应用程序。

在Excel中导出数据

我用过 

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>

使用以下代码将表格导出为XLS格式： 

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

上面的代码工作正常。

以CSV，PDF格式导出数据

以同样的方式，我想以CSV和PDF格式导出数据。
我用http://www.directiv.es/ng-csv导出CSV数据，但它在ubuntu免费版办公室（文件显示损坏的数据）不能正常工作。
任何人都可以告诉我如何以CSV，Excel和PDF格式在angularjs中导出表格数据？

您可以使用XLSX.js将数据从AngularJS导出为XLS，XLSX，CSV和TAB格式的Alasql JavaScript库。

在代码中包含两个库：

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

要将数据导出为Excel格式，请在控制器代码中创build一个函数： 

 function myCtrl($scope) { $scope.exportData = function () { alasql('SELECT * INTO XLSX("mydata.xlsx",{headers:true}) FROM ?',[$scope.items]); }; $scope.items = [{a:1,b:10},{a:2,b:20},{a:3,b:30}]; };

然后在HTML中创build一个button（或任何其他链接）： 

 <div ng-controller="myCtrl"> <button ng-click="exportData()">Export</button> </div>

在jsFiddle中试试这个例子 。

要将数据保存为CSV格式，请使用CSV（）函数： 

 alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);

或使用正确的文件格式的TXT（），CSV（），TAB（），XLS（），XLSX（）函数。

如果您对CSV文件满意，那么ngCsv模块就是要走的路。 您不会从DOM中加载元素，而是直接导出数组。 在这里你可以看到一个ngCsv的实例。

html： 

  <h2>Export {{sample}}</h2> <div> <button type="button" ng-csv="getArray" filename="test.csv">Export</button> </div>

和js： 

 angular.module('csv', ['ngCsv']); function Main($scope) { $scope.sample = "Sample"; $scope.getArray = [{a: 1, b:2}, {a:3, b:4}]; }

另存为; 要更改注册的文件扩展名，例如：“f：\ folder \ report.html”目录？ 

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

我已经通过了几种方法，并得出以下结论，types安全（DefinitelyTyped）： 

  exportAsExcel(tableId: string, fileName: string, linkElement: any) { 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(decodeURI(encodeURIComponent(s))); }, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); }; // get the table data var table = document.getElementById(tableId); var ctx = { worksheet: fileName, table: table.innerHTML }; // if browser is IE then save the file as blob, tested on IE10 and IE11 var browser = window.navigator.appVersion; if ((browser.indexOf('Trident') !== -1 && browser.indexOf('rv:11') !== -1) || (browser.indexOf('MSIE 10') !== -1)) { var builder = new MSBlobBuilder(); builder.append(uri + format(template, ctx)); var blob = builder.getBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); window.navigator.msSaveBlob(blob, fileName + '.xlsx'); } else { var element = document.getElementById(linkElement); var a = document.createElement('a'); a.href = uri + base64(format(template, ctx)); a.target = '_blank'; a.setAttribute('download', fileName + '.xlsx'); document.body.appendChild(a); a.click(); } toastr.success("Awesome!", "We've created an Excel report for you and you should get it as a download in your browser."); }

荣誉归功于那些在各种文章中作出贡献的人

我们可以将表格中的数据导出为各种格式，包括Json，Xml，Pdf …..

你可以find详细的解释http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html注意：这个实现不会在IE中运&#x884C;

你需要什么？ Angularjs Jquery.js引用下面的tableExport.js，JqueryBase64.js，html2canvas.js，base64.js，Jspdf.js，sprintf.js 

  <script type="text/javascript"> var myAppModule = angular.module('myApp', []); myAppModule.controller('myCtrl', function ($scope) { $scope.exportData = function () { $('#customers').tableExport({ type: 'json', escape: 'false' }); }; $scope.items = [ { "FirstName": "Prathap", "LastName": "Kudupu", "Address": "Near Anjana Beach" }, { "FirstName": "Deepak", "LastName": "Dsouza", "Address": "Near Nariman Point" } ]; });

Interesting Posts

从excel粘贴到ngGrid中

在Angularjs和WebApi中下载Excel文件

HTML5 + JS替代Silverlight应用程序

使用Angular获取Excel文档并保存到磁盘

如何使用Angular和Spring Rest服务下载xls文件？

使用webapi和angularjs下载excel文件

如何从Excel导入数据

AngularJS – 任何方式导出xls与dynamic内容？

XMLHttpRequest的responseType属性接受多个值

无法用Angular JS和spring MVC打开下载文件