在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

可以使用带有XLSX.js的Alasql JavaScript库将数据从AngularJS输出为XLS、XLSX、CSV和tab格式。

在代码中包含两个库：

• 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中尝试使用this example。

要将数据保存为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}];                            
}

Answer 3

另存为；要更改注册的文件扩展名，例如："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");