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

Question

我想在我的应用程序中添加CSV,Excel,PDF格式功能的导出表数据.

我正在使用angularjs 1.2.16构建应用程序.

在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 libre office(文件显示已损坏的数据)中工作不正常.
谁能告诉我如何在angularjs中导出CSV,Excel和PDF格式的表格数据？

Answer 1

您可以从AngularJS数据导出到XLS,XLSX,CSV和TAB格式的Alasql JavaScript库XLSX.js.

在代码中包含两个库:

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

要将数据导出为Excel格式,请在控制器代码中创建一个函数:

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中创建一个按钮(或任何其他链接):

<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()函数来获得正确的文件格式.

Answer 2

如果您对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}];                            
}