Question

在一个html正文中，我有两个模板，一个用于标题，另一个用于模板。标题模板有一个save and download按钮，用于将ngTable数据导出到csv文件using ngTable Export，该文件位于contents.html模板文件中，但此导出仅在我放置锚标记时有效单击处理程序以在同一模板中导出。

content.html（模板1）

<a class="btn btn-default export-btn" ng-click='csv.generate($event, "report.csv")' href=''>Export</a> <!-- this works -->
<table ng-table="tableParams" show-filter="true" class="table" export-csv="csv">
        <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
            <td data-title="'Date'" align="center" filter="{ 'date': 'text' }" sortable="'date'">{{ item.date | date: 'd MMM yyyy' }}</td>
            <td data-title="'Label'" align="center" filter="{ 'label': 'text' }" sortable="'label'">{{item.label}}</td>         
            <td data-title="'Count'" align="center" filter="{ 'count': 'text' }" sortable="'count'">{{item.count}}</td>
        </tr>
</table>

header.html（模板2）

<button class="save-button" ng-click='csv.generate($event, "report.csv")'></button> <!-- does not work-->

请使用单独模板上的按钮帮助我将表格内容导出到csv。

更新

Unfinished plunker link.. export not working somehow in plunker

Answer 1

plunkr中的锚标记缺少ng-href="{{ csv.link() }}，这是导致浏览器将csv下载为文件的原因。

如果您必须使用按钮而不是锚标记，则可以simulate href使用调用csv.generate的函数，然后将location.href设置为csv.link()返回的值}：

$scope.exportFile = function($event, fileName) {
  $scope.csv.generate($event, "report.csv");
  location.href=$scope.csv.link();
};

但是，因为您希望按钮和表来自不同的模板文件，所以它们可能被绑定到different child scopes。对此的快速解决方法是将$parent范围内存在的对象的导出指令告诉create the csv helper：

<table ng-table="tableParams" export-csv="helper.csv">

然后将您的控制器更改为：

$scope.helper = {
  csv: null //will be replaced by the export directive
};

$scope.exportFile = function($event, fileName) {
  $scope.helper.csv.generate($event, "report.csv");
  location.href=$scope.helper.csv.link();
};

这是一个有效的演示：http://plnkr.co/edit/a05yJZC1pkwggFUxWuEM?p=preview

如何从angularjs中的不同模板触发从csv导出表数据？

1 个答案: